IPWEditor - In-Place WYSIWYG 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.

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.

IPWEditor - 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.

DEMO 1 (FCKeditor)

Click me! I am editable and WYSIWYG!!! (FCKeditor)

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="fckeditor/fckeditor.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>

DEMO 2 (TinyMCE)

Click me! I am editable and WYSIWYG!!! (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 Releases 1.2 (FCKeditor & TinyMCE support)

IPWEditor with examples and Dependencies
IPWEditor code only - jquery.ipweditor-1.2.js

Documentation

Getting started

Download Older Release (1.1 FCKeditor support only)

IPWEditor with examples and Dependencies
IPWEditor code only - jquery.editable.wysiwyg-1.3.3.1.js

Add new comment

Answer to my question

Submitted by Anonymous on Sun, 02/28/2010 - 19:37.

I'm not common with JavaScript. The answer is: I have to call the function after activating the class of the list-items. It's not PHP or C but JQuery. Damn it but thank you very much for the great combination-plugin!!

OT-Question, sorry.

Submitted by Anonymous on Sun, 02/28/2010 - 18:42.

I have a page with a List. before the user loggs in the list is not editable and after logging in I add a class to the List-items and the list should be editable: $('li').addClass('foo');
However, if I have the class added to the list items from source (< li id="12" class="foo" >bar< /li >) it works with TinyMCE and editing but not after adding the Class. Do you maybe have any idea of where the problem is because I really don't understand this beahviour.
TIA, F.

IE 8

Submitted by Anonymous on Thu, 02/18/2010 - 18:49.

Seem to be having a problem submitting data with IE8 get error code 12015

I am using the FCKEditor implementation

Re: IE8

Submitted by admin on Thu, 02/18/2010 - 19:05.

Where do you get this error code (12015)? in the javascript? explorer crash code? make sure you are using the latest version (Releases 1.2) older versions had problems with IE8.

If you still have problems contact me at amir(at)spacebug(dot)com and we will sort it out.

Cheers
Amir

Div class

Submitted by Anonymous on Fri, 08/28/2009 - 19:59.

Was there supposed to be myipwe class somewhere in the download?

Re: Div class

Submitted by admin on Sat, 08/29/2009 - 10:36.

No, there is no need for myipwe div class.
This is how jQuery works - the class name is just an identifier for the jQuery selector - most jQuery plug-ins work like this.

Suggestions

Submitted by Anonymous on Thu, 08/27/2009 - 15:51.

This is really a wonderful tool.
I have tried to add more than one div with class="myipwe"
And it work fine when I edit it one by one.
However, If one of them is in edit mode(wysiwyg mode).
The second one will not become wysiwyg editor (only textarea).
Could you add an option so that the editor can be opened in a modal window?
Thank you for you work!