Hi guys
I'm trying to use CKEditor to inline edit text in a React component. And for this, the editor must only be created when the user clicks inside the contentEditable="true" element and has to disappear when the user leaves it, so that there are no traces that CKEditor was ever there in the DOM.
For this, I've decided to create the editor instance on the focus event of the element i want to be editable and destory it on the editors "blur" event. And here comes the problem: When I do this, the editor does not get initialized correctly at the first click.
When I click in and then out again, I don't get the blur event, even if the Toolbar is there. If I then click in and out, again, the blur event gets fired and the editor disappears.
Here's my code:
<html>
<head>
<script src="http://cdn.ckeditor.com/4.4.5/full/ckeditor.js"></script>
<script src="http://cdn.ckeditor.com/4.4.5/full/adapters/jquery.js"></script>
</head>
<body>
<div id="test" contentEditable="true">Hello World!</div>
<script>
CKEDITOR.disableAutoInline = true;
document.getElementById("test").addEventListener("focus",function(){
var editor = CKEDITOR.inline(document.getElementById("test"));
editor.on("blur",function(){
editor.destroy();
});
});
</script>
</body>
</html>You might ask, why I don't just use the "blur" event of the element itself. The answer is simple: If I try to click icons in the toolbar then, I already get the blur event of the element, since the Toolbar is outside the element.
And there's a second reason I want this to get fixed: When I click into the element the first time, the editor does not seem to know that I am in the element already. When I normally click into the element, I can see eiter "right","center","left" or "justify" alignment selected in the toolbar. But this is not the case after the first click. Try it out yourself.
Is this a bug? Is there a workaround?
Update
The last poster in this thread seemed to have the same problem: http://ckeditor.com/forums/CKEditor/Registered-blur-event-doesnt-fire-the-first-time-it-seems-that-it-should-see-details
Also I've found the following bug report: http://dev.ckeditor.com/ticket/11647
Is this going to be fixed soon?
I created a patch for the
I created a patch for the #11647 issue. It needs additional work still (tests), but it should be good.
BTW. Since editor.destroy() does not unbind all listeners immediatelly (actually it does, but since blur was already fired all its listeners will be executed), you should call evt.cancel() in the blur listener you use, cause otherwise other blur listeners may be executed after you destroy editor and that's going to bleed.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
Thank you!
That's cool! Thank you :)
Can you tell me when this will land in the official release?
Thanks for the tip for when to call destroy btw :)
If there will be no problem
If there will be no problem with the patch, then the fix will be released in CKEditor 4.4.6 (more or less one month from now).
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+