In Place, WYSIWYG Editor with FCKeditor and Editable

In place editor, such as Editable, 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 advance User-Interfaces 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, they are not fully compatible and some tweaking is required to make them interoperate.

In this article will demonstrate how, with little modification FCKeditor can be integrated into Editable to create an in place WYSIWYG editor (see example3).

1) In-place Editor

In-place Edit (also known as Edit In Place) allows you to edit text on web pages without going to a separate page and filling out a form.

The text is replaced with an input as shown in this example:

Click me! I am editable!!!

Here is how it looks behind 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

WYSIWYG , is an acronym for What You See Is What You Get, used in computing to describe a system in which content displayed during editing appears very similar to the final output.

Example of a WYSIWYG HTML editor

Here is how it looks behind 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 = "./fckeditor/" ;

oFCKeditor.ReplaceTextarea() ;

}

</script>

<textarea id="MyTextarea" name="MyTextarea">Look at me, I am <b>WYSIWYG!</b></textarea>

3) In Place, WYSIWYG Editor with FCKeditor and Editable

In Place, WYSIWYG Editor is the best of both world- it provides an easy in place editing and adds a layer of WYSIWYG visual editor over it

IPWE Editor Example

Click me! I am editable and WYSIWYG!!!

Here is how it looks behind the hood:


    <script type="text/javascript" src="jquery.ipweditor-1.2.1.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',

           cancel:'cancel'

            });



</script>

What I have done here was to extent the Jquery Editable plugin and added a 'wysiwyg' type.

When you set the type to wysiwyg be sure to add an instance of FCKeditor as shown in the example.

Formal documentation and download can be found here.