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)
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
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!!
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.
Could not find the compatibility issue:
jQuery is in V 1.3.1 – http://docs.jquery.com/Downloading_jQuery
jQuery Editable is in V 1.3.3 – http://www.arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html
I could not find the 1.7.1 you are referring to, can you please add the URL to this thread?
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…’
});
});
That is Jeditable, and IPWeditor uses Editable. I will look into supporting Jeditable in the next releases.
Cheers
Amir
Hi, Thanks for good thing
Can I mix with (nicEdit) WYSIWYG ?? how? .. please
http://nicedit.com/demos.php
Regards,
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?
See my new post regarding this:
http://spacebug.com/Connect_IPWEditor_to_php_Server_Side
Cheers
Amir Shevat
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;
Thanks, got several emails and comments about this issue. Managed to get this bugfix into 1.2.1.
Cheers
Amir Shevat
Hey mate its looks like a very good plugin for my little PH engine however i can’t manage it out – how to make multiply EDITABLE TextAreas???
Already bombed my head with stuff for like a 6 hours and can’t figure it out!!
what the script? (its working with the first textarea)
”
window.onload = function()
{
var oFCKeditor = new FCKeditor( ‘content’ ) ;
oFCKeditor.BasePath = “./editor/” ;
oFCKeditor.ReplaceTextarea() ;
}
”
however can’t make this to work:
”
var oFCKeditor2 = new FCKeditor( ‘contact_text’ ) ;
oFCKeditor2.BasePath = “./editor/” ;
oFCKeditor2.ReplaceTextarea() ;
”
Best Regards,
Rico.
@Rico – Can you please post the relevent HTML part of your page.
Is it possible to use it with tinymce editor instead?
This is the next major task on this project todo list. This feature will be released in 7-10 days.
This is really a wonderful tool.
I have tried to add more than one div with class=”myipwe”
And it work fine when I edit it one by one.
However, If one of them is in edit mode(wysiwyg mode).
The second one will not become wysiwyg editor (only textarea).
Could you add an option so that the editor can be opened in a modal window?
Thank you for you work!
You can create as many modals as you like – Just create several divs with different class name and create a corresponding IPWEditor for each div:
$(‘.myipwe’).editable(…
$(‘.myipwe2′).editable(…
$(‘.otheripwe’).editable(…
Cheers
Amir
Was there supposed to be myipwe class somewhere in the download?
No, there is no need for myipwe div class.
This is how jQuery works – the class name is just an identifier for the jQuery selector – most jQuery plug-ins work like this.
Any plan to support CKEditor (the successor of FCKeditor) in the future?
CKEditor
Seem to be having a problem submitting data with IE8 get error code 12015
I am using the FCKEditor implementation
Where do you get this error code (12015)? in the javascript? explorer crash code? make sure you are using the latest version (Releases 1.2) older versions had problems with IE8.
If you still have problems contact me at amir(at)spacebug(dot)com and we will sort it out.
Cheers
Amir
I have a page with a List. before the user loggs in the list is not editable and after logging in I add a class to the List-items and the list should be editable:
$('li').addClass('foo');However, if I have the class added to the list items from source (
< li id="12" class="foo" >bar< /li >) it works with TinyMCE and editing but not after adding the Class. Do you maybe have any idea of where the problem is because I really don’t understand this beahviour.TIA, F.