IPWEditor – In-Place WYSIWYG Editor 1.2 Released with TinyMCE support


IPWEditor provides easy in-place editing for Web pages with a layer of WYSIWYG. It allows you to seamlessly replace text on Web pages with inputs for on-the-spot editing.

Up until now IPWEditor has integrated only with FCKeditor. The major feature in this release is integration with TinyMCE, a popular WYSIWYG editor.

Developers can now choose to run IPWEditor with either FCKeditor or with TinyMCE editor using the same IPWEditor code.

DEMO (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 and docs

Formal documentation and download can be found here.

Share the love...Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

Amir Shevat

Amir Shevat is the global Startup Outreach lead in Google Developer Relations (g.co/launch). Previously, Amir Led Google Campus Tel Aviv and was the co founder of several startups.

You may also like...

7 Responses

  1. anonymous says:

    please help

  2. Amir Shevat says:

    In the example, I use an alert() JavaScript function to prompt the value of the edit result, at that point you can create an Ajax call that will send the new content to the server.

    Cheers
    Amir

  3. anonymous says:

    Hey Amir,

    This is great!

    However I noticed that tinymce options weren’t being picked up by the tinymce editor.

    I changed line 156 of ipweditor-1.2 from:

    ed.setting = options.editor.setting;

    to


    ed.settings = options.editor.settings;

    This allowed me then to use stuff like the advanced theme and plugins.

    -Chris

  4. anonymous says:

    Thanks Chris. I was looking for this fix.

  5. Amir Shevat says:

    Thanks for the contrib,
    I will update and upload a new version.

    Cheers
    Amir

  6. anonymous says:

    I am beginner of the jquery and tinymce richtext editor.

    I have successfully installed your script and saved in database but when I try to change tinymce toolbar by inserting the following line, it fails.

    $().ready(function() {

    var ed = new tinymce.Editor(‘content’, {

    //newline to change toolbar
    theme : “advanced”,
    });

    ………………

    even when I follow the post and change the setting to

    ed.settings = options.editor.settings;

    It still fails.

    Can you give me a guide on how to do it!

  7. Amir Shevat says:

    change:
    theme : “advanced”,

    to be:
    theme : “advanced”

    See 1.2.1 for a live example here:
    http://spacebug.com/IPWEditor_In-Place_WYSIWYG_Editor_1.2.1_Released

    Cheers
    Amir

Leave a Reply

Your email address will not be published. Required fields are marked *