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.1.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.1.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.1 (FCKeditor & TinyMCE support)

IPWEditor with examples and Dependencies
IPWEditor code only – jquery.ipweditor-1.2.1.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