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

Comments (29)

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.

Hi, im a problem with upload image of editor.

“Forbidden

You don’t have permission to access /fckeditor/editor/filemanager/browser/default/browser.html on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.”

in the filemanager of my site im change permissions a 777 and the problem is the same.

when write the url /fckeditor/editor/filemanager/browser/default/browser.html.

error
“The server didn’t reply with a proper XML data.Please check your configuration.”

That was very helpful, thank you for the contribution. it seems there are many who are still struggling with this in some forums, i shall reference your page. keep it up. cheers.

Hey there.

I’d like to try the plug-in, but before I do that, would it work with CKEditor (not FCKeditor) or additional tweaks will have to be made?

Thanks.

@ML – additional tweaks will have to be made..(in my todo list). if you do integrate with FCKeditor I would be happy to publish the new code.

How do I enable simple password protection prior to click or upon save?

I have a page where user can drag ipweditor div. For the first time when user drag the ipweditor and click on it editor(tinymce) is opening perfectly, but if user again drag any instance of it and click on it, there is css error like toolbar is a mess.

here is the code:
var ed = new tinymce.Editor(‘txt_hd’, {
//some_setting : 1
theme : “advanced”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_buttons1 : “fontsizeselect,forecolor, bold, italic, underline”,
theme_advanced_buttons2 : “”,
theme_advanced_buttons3 : “”

});

$(‘.txt_hd’).editable(
{
type: ‘wysiwyg’,
editor: ed,
onSubmit:function submitData(content){
//alert(content.current);

tempid = $(this).parents(“@[id]“).attr(“id”).split(‘content_id_’);

//alert(tempid[1]);

new_data = $(this).parents(‘.droping_box_bdy’).html().replace(/\//g,”endtag”).replace(/ /g,’space’).replace(/&/g,’ANDSIGN’).replace(/:/g,’COLON’).replace(/#/g,’HASH’).replace(/100%/g,’HUNDRED’);
new_data = encodeURIComponent(new_data);
new_data = new_data.replace(/%3F/g,’QUESTION’);
new_data = decodeURIComponent(new_data);

id = tempid[1];
//alert(new_data);

event_id = ;

update_hotsite_contents(event_id,new_data,id, menu_master_id);

},
submit : messagesDictionary['']['message'],
cancel : messagesDictionary['']['message2']
});

I have to including it two times.

1. during on load of page
2.when user is dragging the module, as drag drop is happening through jquery ajax.

as no 2 event is occurred , then user click on div, css error occurs.

i think error is for this : new tinymce.Editor().

it is created more than one time.

Please help.

Thanks in advance.

Pallab

Great plugin!

I am curious if links can still be clickable in editable area without it causing WYSIWYG to initiate?

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.

Post a comment