An In-Place editor, such as jQuery Editable plug-in, lets you seamlessly replace texts on web pages with inputs, for on-the-spot editing (see example 1). WYSIWYG editors, such as FCKeditor, provide easy, word-like editor on the web (see example 2). Basically, the two are advanced User-Interface JavaScript tools that help users edit content on the web in an easy, intuitive and productive way.
Wouldn’t it be great if we combine the two to create a really cool, web 2.0 user experience for editing content on the web? Unfortunately, FCKeditor and Editable are not fully compatible and some tweaking is required to make them interoperable.
In this article will demonstrate how, with little modification, FCKeditor can be integrated into Editable to create an In-Place WYSIWYG editor (see example3).
If you want to skip this documentation and just go to download the code and examples you can do so here.
1) In-place Editor
An In-place Edit (also known as Edit In Place) allows users to edit text on web pages without going to a separate page and filling out a form.
The text is automatically replaced with an input as shown in this example:
Example 1 – In-Place Editor
Here is how it looks under the hood:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.editable-1.3.3.js"></script><div class=”myeditable”> Click me! I am editable!!! </div>
<script type=”text/javascript”>
$(‘.myeditable’).editable(
{
submit:’save’
})
</script>
2) WYSIWYG Editor
A WYSIWYG (What You See Is What You Get) editor lets you produce content that looks the same (or very nearly the same) when editing and when displayed on a web page or document.
Example 2 – a WYSIWYG HTML editor
Here is how it looks under the hood:
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/spacebug/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
<textarea id="MyTextarea" name="MyTextarea">Look at me, I am <b>WYSIWYG!</b></textarea>3) IPWEditor – In-Place, WYSIWYG Editor
IPWEditor – In Place, WYSIWYG Editor is the best of both world- it provides easy In-Place editing and adds a layer of WYSIWYG visual editor over it
Example 3 – IPWEditor In-Place WYSIWYG Editor
Here is how it looks under the hood:
<script type="text/javascript" src="jquery.editable.wysiwyg-1.3.3.js"></script><div id=”editable” class=”myipwe”> Click me! I am editable and WYSIWYG!!! </div>
<script type=”text/javascript”>
//set all the FCKeditor configuration here and pass it to the editable
var oFCKeditor = new FCKeditor( ‘editor1’) ;
oFCKeditor.BasePath = “/ipwe/fckeditor/” ;
$(‘.myipwe’).editable(
{
type: ‘wysiwyg’,
editor: oFCKeditor,
onSubmit:function submitData(content){
alert(content.current)
},
submit:’save’
});
</script>
What I have done was to extend the jQuery Editable plug-in and add a ‘wysiwyg’ type. I also hooked up the Editable events to FCKeditor in order to pass the data back and forth from Editable to FCKeditor. FCKeditor did not require any code modification.
Important note: When you set the type to wysiwyg be sure to add an instance of FCKeditor as shown in the example.
download and docs
Formal documentation and download can be found here.
that is super sweet
only thing , instead of in-place edit, can you do popup-edit mode as well? sometimes in-place edit with that wysiwyg will break layout in certain places
That is a great idea!
I will release something like that very soon.
Cheers
Amir Shevat
Great post.. I have one suggestion.. I would love to see the fckedit area be auto-expandable..
Regards,
Sam
CKEditor now brings native support for jQuery! Check this out: http://ckeditor.com/blog/CKEditor_for_jQuery
this is amazing. i’ve been wanting to implement a solution like this for a long time but had a difficult time getting it to work. hopefully your documentation can set me straight. thanks for taking the time to write this.
If you delete all the text from Example 3 and then click the save button, IE7 will throw an exception. FF seems to work fine though.
Thanks for spotting this – the exception was caused by jQuery html() method that tries to delete all the nodes before setting the new HTML (and crashes – probably because of the complexity of FCKeditor node structure)
I just released a new release that resolves this.
Tested on Chrome, IE and FF.
Cheers
Amir
It just needs an hover effect now to indicate editable text.
Thanks.
Thank you.
You can add the hover effect to indicate editable text using Style:
Here is how you do it: