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