I'm using the new CKEditor 4 which I configured through CKbuilder to have basically everything and running on chrome.
When an area is dynamically set as editable by enabling disableAutoInline (disableAutoInline = true), the blur event doesn't fire the first time the user clicks out of the editable area, and for that matter the toolbar doesn't go away.
Is anyone else experiencing this?
1) Have an contenteditable div on your page
2) Enable disableAutoInline = true
3) Call ckeditor dynamically using "inline" and bind a blur handler.
4) run the page and click in the area, perform some edits.
5) click elsewhere on the page
6) the blur handler does not fire and the tool bar is still above the editable area; It is expected that the tool bar would vanish and the blur event fire
7) Subsequently, if you click BACK into the editable area, and then back out a second time, the blur event fires and the toolbar goes away (as it was expected to the first time)
You can't see in this video, but at four seconds I'm clicking the white background... I then proceed to click into the area and back out and you see the blur event firing appropariately
http://screencast.com/t/zTsVshQs
I guess if nothing turns up in the forum here I'll submit a bug.
My code looks something like this:
function CKEditorHTML5(ele){
var useele = $('#' + ele)[0];
$(useele).addClass('isckup');
outinstance(useele);
clearIt($(ele).attr('id'));
useele.contentEditable = true;
setTimeout('CKEDITOR.inline("'+ ele +'", { on: { blur: function() {alert("blur handler"); } }});', 1000);
}
function blurhandler(e){
alert(e);
}
Thanks, all.
Blur event does not fire until second time clicked outside area
I have the same problem.
The blur event does not fire until the second time I click outside the editable area. I am also using inline editing and creating editable areas dynamically.
One possible workaround is to use this:
Call this when the user clicks outside your area and then the editable area will be destroyed. Then you will have to create it again dynamically once the user clicks again in the editable area.
You can also use this to manually trigger the blur event:
If someone knows how to fix this issue of the blur event not firing the first time you click outside the editable area please help, it is very annoying and messy to have to do a workaround such as these.
Thanks in advance
I'm also seeing this same
I'm also seeing this same behavior. I'm dynamically adding editors by attaching a click event to turn a DIV contenteditable and create and inline editor on it, then binding editor destruction / cleanup code with editor.on("blur",...)
The first outside click leaves the editor stuck, the second successfully calls blur and removes it.
This fixes the problem. It
This fixes the problem. It manually fires the blur event on first blur.