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

9 Replies


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.

9 thoughts on “IPWEditor – In-Place WYSIWYG Editor with FCKeditor and JQuery Editable”

  1. anonymous

    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

    ↓

Leave a Reply