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...
$('.text_areas').ckeditor() .focus(function() {alert("focused");}) .blur(function() {alert("blured");});http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html#on
CKEDITOR.instances.text_area_instance.on('focus', function() { alert("focused"); }); CKEDITOR.instances.text_area_instance.on('blur', function() { alert("blurred"); });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!