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)
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)
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
Download Older Release (1.1 FCKeditor support only)
IPWEditor with examples and Dependencies
IPWEditor code only – jquery.editable.wysiwyg-1.3.3.1.js
