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

20 thoughts on “IPWEditor – In-Place WYSIWYG Editor”

  1. anonymous

    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!!

    ↓
    1. anonymous

      Now there is a new jquery editable Version 1.7.1 and is not compatible.

      I will be pleased if you can modify this fckeditor versión for the new one.

      Thanks for your work and sorry for my english.

      ↓
    3. anonymous

      This is the webpage

      http://www.appelsiini.net/projects/jeditable

      The zip with everything is here:

      http://github.com/tuupola/jquery_jeditable/zipball/master

      An example here;

      As you can see they put the url save.php, and there the data is send with $_POST

      after that I use save.php to update the BBDD.

      $(document).ready(function() {
      $(‘.edit’).editable(‘http://www.example.com/save.php’, {
      indicator : ‘Saving…’,
      tooltip : ‘Click to edit…’
      });
      });

      ↓
    6. anonymous

      How to send the data to database once we have modified it with the help of fckeditor.

      I need to post the changed values to file how to do that. Is there any documentation avaialbale?

      ↓
  2. anonymous

    Good job first of all, it will be very handy 🙂

    After banging my head for an hour, found out you got a very stellar bug with the tinyMCE implementation. I couldn’t specify custom settings for the editor at all. The bug is on (or around) line 152. It reads:

    ed.setting = options.editor.setting;

    but should be:

    ed.settings = options.editor.settings;

    ↓

Leave a Reply