IPWEditor provides easy in-place editing for Web pages with a layer of WYSIWYG. It allows you to seamlessly replace text on Web pages with inputs for on-the-spot editing.
Up until now IPWEditor has integrated only with FCKeditor. The major feature in this release is integration with TinyMCE, a popular WYSIWYG editor.
Developers can now choose to run IPWEditor with either FCKeditor or with TinyMCE editor using the same IPWEditor code.
DEMO (TinyMCE)
Code behind:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.editable.ipweditor-1.2.js"></script>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script><div id=”editable” class=”myipwe1″> Click me! I am editable and WYSIWYG!!! </div>
<script type=”text/javascript”>
//set all the tinyMCE configuration here and pass it to the editable
$().ready(function() {
var ed = new tinymce.Editor(‘myipwe1’, {
some_setting : 1
});
$(‘.myipwe1’).editable(
{
type: ‘wysiwyg’,
editor: ed,
onSubmit:function submitData(content){
alert(content.current)
},
submit:’save’
});
});
</script>
download and docs
Formal documentation and download can be found here.
please help
In the example, I use an alert() JavaScript function to prompt the value of the edit result, at that point you can create an Ajax call that will send the new content to the server.
Cheers
Amir
Hey Amir,
This is great!
However I noticed that tinymce options weren’t being picked up by the tinymce editor.
I changed line 156 of ipweditor-1.2 from:
ed.setting = options.editor.setting;
to
ed.settings = options.editor.settings;
This allowed me then to use stuff like the advanced theme and plugins.
-Chris
Thanks Chris. I was looking for this fix.
Thanks for the contrib,
I will update and upload a new version.
Cheers
Amir
I am beginner of the jquery and tinymce richtext editor.
I have successfully installed your script and saved in database but when I try to change tinymce toolbar by inserting the following line, it fails.
$().ready(function() {
var ed = new tinymce.Editor(‘content’, {
//newline to change toolbar
theme : “advanced”,
});
………………
even when I follow the post and change the setting to
ed.settings = options.editor.settings;
It still fails.
Can you give me a guide on how to do it!
change:
theme : “advanced”,
to be:
theme : “advanced”
See 1.2.1 for a live example here:
http://spacebug.com/IPWEditor_In-Place_WYSIWYG_Editor_1.2.1_Released
Cheers
Amir