IPWEditor – In-Place WYSIWYG Editor with FCKeditor and JQuery Editable


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

Click me! I am editable!!!

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

Click me! I am editable and WYSIWYG!!!

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.

Share the love...Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

Amir Shevat

Amir Shevat is the global Startup Outreach lead in Google Developer Relations (g.co/launch). Previously, Amir Led Google Campus Tel Aviv and was the co founder of several startups.

You may also like...

9 Responses

  1. anonymous says:

    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

  2. Amir Shevat says:

    That is a great idea!
    I will release something like that very soon.

    Cheers
    Amir Shevat

  3. anonymous says:

    Great post.. I have one suggestion.. I would love to see the fckedit area be auto-expandable..

    Regards,
    Sam

  4. anonymous says:

    CKEditor now brings native support for jQuery! Check this out: http://ckeditor.com/blog/CKEditor_for_jQuery

  5. anonymous says:

    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.

  6. anonymous says:

    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.

  7. Amir Shevat says:

    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

  8. anonymous says:

    It just needs an hover effect now to indicate editable text.

    Thanks.

  9. Amir Shevat says:

    Thank you.

    You can add the hover effect to indicate editable text using Style:

    Please hover over me!

    Here is how you do it:

    
    <style>
    div.editableHover:hover{
        background: #F0F0F0;
        font-style: italic;
        cursor: text;
    }
    </style>
    
    <div class="editableHover">
    I am editable! hover over me!
    </div>
    
    

Leave a Reply

Your email address will not be published. Required fields are marked *