IPWEditor – Getting started

How to install and use IPWEditor In-Place WYSIWYG editor

  1. Download IPWEditor with examples and Dependencies ( you can download IPWEditor code only and download FCKeditor and jQuery from their sites)
  2. Add FCKEditor, Jquery and jquery.editable.wysiwyg-1.3.3.js (IPWEditor script) to your page:

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.editable.wysiwyg-1.3.3.js"></script>
    <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
  3. Create the div to be edited:
    <div id=”editable” class=”myipwe”> Click me! I am editable and WYSIWYG!!! </div>
  4. Create the a FCKEditor instance:
    <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/” ;
    …..
  5. Create the editable, set the type to wysiwyg, and pass the FCKeditor instance:

    ....
    $('.myipwe').editable(
    {
    type: 'wysiwyg',
    editor: oFCKeditor,
    onSubmit:function submitData(content){
    alert(content.current)
    },
    submit:'save'
    });

    </script>

Further documentation and Configuration can be found in FCKeditor and Editable websites.

Comments (4)

Great script! Not easy to find one like that!

Thanks!

Successfully integrated ipweditor and fckeditor into my page that has multiple instances.
Working very well.

Really sweet would be an option to change the height of the editor.

Currently I’m setting the height in the oFCKEditor.Height var.

However it would be cool if we could set it in the .editable params (type, submit, cancel etc.)

Paul

Can you give a small example of how to customize the TinyMCE and FCKEditor editors?

For example in TinyMCE I would normally do something like the following:

tinyMCE.init({
editor_selector : "header",
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "cut, copy, paste, separator, emotions, separator, preview",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_resizing : true,
plugins : "noneditable, emotions",
});

I can’t seem to figure out how to put those customization into IPWEditor. Thanks for the help.

IPWEditor 1.2.1 added support for tinyMCE advance settings: http://spacebug.com/IPWEditor_In-Place_WYSIWYG_Editor_1.2.1_Released

Cheers
Amir Shevat

Post a comment