Hi All,
I'm developing an application where there are a number of sections on the page. Each section can be edited individually.
Ideally, the user clicks on the section, a ckeditor appears with the content inside, the user edits it, and then clicks outside the editor, perhaps on another paragraph. When the editor loses focus, the contents of the current editor are uploaded to the server.
Implementing the "user clicks on a paragraph, an editor appears, and the user edits it" part is a doddle with ckedit and jquery.
What's not a doddle is the click outside the box part.
If I use the 'blur' event:
myeditor.on('blur',function() {
}
It's close to the behaviour I want...except that this is called when the font/size/style/etc pulldowns are created. Perhaps those events should not be propagated back up the DOM?
The only other way I could think of to make this work is that once the user clicks on a paragraph to edit it, they must click on an 'ok' or 'cancel' button to submit any edits. It might work, but it's not terribly intuitive.
Any better ideas?
-Ken
I'm developing an application where there are a number of sections on the page. Each section can be edited individually.
Ideally, the user clicks on the section, a ckeditor appears with the content inside, the user edits it, and then clicks outside the editor, perhaps on another paragraph. When the editor loses focus, the contents of the current editor are uploaded to the server.
Implementing the "user clicks on a paragraph, an editor appears, and the user edits it" part is a doddle with ckedit and jquery.
What's not a doddle is the click outside the box part.
If I use the 'blur' event:
myeditor.on('blur',function() {
}
It's close to the behaviour I want...except that this is called when the font/size/style/etc pulldowns are created. Perhaps those events should not be propagated back up the DOM?
The only other way I could think of to make this work is that once the user clicks on a paragraph to edit it, they must click on an 'ok' or 'cancel' button to submit any edits. It might work, but it's not terribly intuitive.
Any better ideas?
-Ken
Re: 'blur' event slightly too aggressive...
Hi, I've been trying to do something very similar. I've integrated ckeditor using jQuery and I'm trying to provide contextual help for each instance.
Basically, from some digging around it would appear that there's currently no integration of jQuery for handling events. Ideally my solution would look something looking like the following:
$('.text_areas').ckeditor() .focus(function() {alert("focused");}) .blur(function() {alert("blured");});The process required for implementing the events is through using the CKEDITOR.event "on" function http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html#on.
At this point you could assign the focus event actions to the CKeditor instance:
CKEDITOR.instances.text_area_instance.on('focus', function() { alert("focused"); }); CKEDITOR.instances.text_area_instance.on('blur', function() { alert("blurred"); });Guess there would also be some kind of better solution wherein instantiating the ckeditor instance via jquery would automatically create events to call the original focus and blur events on the text box.
The final scenario not covered is when a form label associated with the text area, to which an editor instance is attached is, is selected, the appropriate CKeditor instance should be focused.
Not sure if some of this should be passed to the dev team for future improvements?
Re: 'blur' event slightly too aggressive...
$('.text_areas').ckeditor(function() { this.on('focus', function() { $(this.element.$).focus(); }); this.on('blur', function() { $(this.element.$).blur(); }); }) .focus(function() {alert("focused");}) .blur(function() {alert("blured");});Not sure if this is the absolute best solution, but it appears to work for me and allows me to use jQuery event handlers.
So, just need to find a way of triggering the CKeditor instance focus and blur based on the hidden textarea events so labels work correctly and we're on to a winner!