So, just like everybody else, I heart jQuery. I’ve got a lot of code that already uses Prototype/Scriptaculous, which works fine, but I just have more fun writing with jQuery, and I think the syntax is cleaner. Plus, I’m always finding sick new plugins for jQuery, so I think a lot of other people are also in love and its like a group thing. I’ve been periodically converting some of my older Prototype code to work with my new young hip love, but sometimes its just easier to adapt something new than rewrite, which brings me to the integration of a WYSIWYG editor.
Lately I’ve been favoring the idea of “edit in place” over a backend admin page, at least for clients, because they can see their text directly in context, and navigate naturally to what they want to change. I like the way jEditable works, and I started using jWYSIWYG after finding the jEditable custom input plugin that ties the two together. Its good for simple things, but I wanted more power, which brings me to CKEditor.
CKEditor is the new-ish rewrite of FCKEditor. Its faster than its predecessor, cleaner, and more flexible. Sounds like a winner. My problem was just getting it to play nice with jQuery, and also to work as a custom input for jEditable. I couldn’t find anything for this online already, possibly because it turned out to be very easy to do, but I figured I’d take a stab at it myself. Most of the work was already done by Mika Tuupola in the WYSIWYG input for jEditable, and I really didn’t take the time to try and out-pimp anything in his code. Its all pretty straight forward anyway.
There’s probably another way to do this, but being lazy, I didn’t take the time to dig in further into CKEditor just yet. It seems like CKEditor.replace() uses the id of a textarea to find it, so I needed to set a custom id on the textarea that jEditable created for the in-place edit. jQuery doesn’t have a built-in function like Prototype’s Element.identify() I looked around and found a generateId jQuery function by Mark Gibson and decided to just include that because I’ll probably end up reusing it. Also, I found it necessary to destroy the CKEditor instance after submitting the data, otherwise there were issues when I tried to edit the same text a second time. Maybe I could just look for an existing instance of the editor before trying to just replace the textarea, but it was easy to just clean up each instance after using it.
There was one other issue I ran into while setting it all up. My custom CMS merges all the javascript on a page into a single file and minifies it to speed up loading. CKEditor didn’t like being included in the bundle that way; it caused some kind of invalid operand error. I think something was getting screwed up by putting the already minified ckeditor.js file through my merger module’s minifier filter. The problem disappeared when I excluded CKEditor from my merge process and just loaded it separately, so don’t double minify.
Here are the files. You could merge them into a single file but I kept them separate since my system crams everything together in the end anyway. If you keep them in separate files just remember to include the generateId file first as the plugin depends on it.
15 Comments
Bloody brilliant!
I’d been banging my head on this particular low ceiling all day.
Thanks, man!
-Ken
Hi Jeremy,
I’ve been trying to use your code but I’m not sure if I should replace jWYSIWYG, use both, and many other questions. Can you post an example?
Thanks!
No need for the example, your code is fantastic.
hey, thanks for your great tutorial. u saved my day.btw i have successfully implemented jeditable and ckeditor. but only one laps still there is the width and height of the editor? is there any way that i can change to the size of the div that i am editing ?
very nice!
One thing I’d like to add is, that I had to remove
onblur:’cancel’,
from the jquery.jeditable.mini.js, because it kept closing the editor when a popup within ckeditor opened like the “Image” popup.
I’m trying to integrate this, but I’m having… issues. For one, All I am getting is the standard textarea without ckeditor integration. 2nd, and my larger problem, is how do i then post this back to the database?
forgive the noob questions, but I really want to understand this.
@qamar – You can set the width and height when calling CKEDITOR.replace(). Just include the values you want in the parameters array like this: CKEDITOR.replace(element_id, {width:500, height:500});
@Tommy – Sounds like CKEDITOR is not being initialized. I won’t be able to help much without a specific example. As for how you post submitted form data back into a database, all I can say is it really depends on what you are trying to do. Sounds like you might need to explore how to access your database from PHP.
Jeremy, thanks for the quick response. I have this in the
$(function() {
$(“.editable_textarea”).editable(“test.php”, {
indicator : “”,
type : ‘textarea’,
submitdata: { _method: “put” },
select : true,
submit : ‘OK’,
cancel : ‘cancel’,
cssclass : “editable”
});
});
I think that is correct, jeditable works, but CKEditor does not initialize. As for posting, What I want this for is an edit only page. my test.php page looks like this:
include “config.php”;
var $id = ;
var $textareavalue = $_REQUEST[""];
$query = mysql_query(“UPDATE ckdata SET text2=’$textareavalue’ where”);
My problem is I don’t know the id or name of the textarea jeditable creates. Also I need to capture the id of the current page being edited. Any help is appreciated.
Jeremy, I’ve changed it a bit, will this work?
$(function() {
$(“.editable_textarea”).editable(“test.php”, {
indicator : “”,
type : ‘textarea’,
id: id->EditValue ?>,
submitdata: { _method: “put” },
select : true,
submit : ‘OK’,
cancel : ‘cancel’,
cssclass : “editable”
});
});
This section: grabs the record id. Will it submit to test.php?
actually, the id part should read:
id: id->EditValue ? >,
This plugin is great but I have a problem with the config.
How can I replace the default config of the ckeditor with your plugin ?
I try with a lot of configuration but I receive an error message.
I try CKEDITOR.replace(myelement, {customConfig:myconfig}) by exemple. But it’s not working.
Thanks a lot
So I understand now that I should retrieve the editor from CKEDITOR.instances[] but if I try with the id generated (jq$0 by exemple, it is not working. Could you help me ?
Jonathan, you hopefully found a solution by now, but others might like to know how to use custom ckeditor settings with this great plugin for jeditable.
I got it working using the code below:
$(“#mydiv”).editable(“http://www.url.net/”, {
type : “ckeditor”,
submit : ‘OK’,
cancel : ‘cancel’,
tooltip : “Click to edit…”,
onblur : “ignore”,
ckeditor : {
toolbar:
[
['Source','Maximize'],
['Undo','Redo'],
['Link','Unlink','Image','SpecialChar']
],
height: 260,
startupFocus: true
}
});
Thanks for a great plugin, but i have a problem.
The ckeditor is displayed, but the moment i click inside the editor it is destroyed.
Another thing i noticed was that if i click a button and try to edit the text it is getting edited.
Could you tell me why is this happening?
@john: I had the same problem and after googling a while I – by sheer luck – found the issue:
You need to specify
onblur: “ignore”
on your code. Leaving it out or setting it to “cancel” will cause the editor to disappear when being clicked.