ckeditor global events not firing on inline editors

Question

I have been looking at some other questions regarding how save inline content. From this, I have read that all of the following should work to detect focus / blur changes:

CKEDITOR.on("blur", function(e) {
    console.log("The editor named " + e.editor.name + " BLUR")
})
CKEDITOR.on("focus", function(e) {
    console.log("The editor named " + e.editor.name + " FOCUS")
})
CKEDITOR.on("instanceReady", function(evt) {
    var editor = evt.editor
    console.log("The editor named " + editor.name + " is now ready")

    editor.on("focus", function(e) {
        console.log("The editor named " + e.editor.name + " is now focused")
    })
    editor.on("blur", function(e) {
        console.log("The editor named " + e.editor.name + " is now focused")
    })
})

I am calling these functions before adding the DIV elements to the page. (Although for good measure, I also tried calling these after I added the DIV elements to the page, without any change in behavior.) I have set the DIV elements all to contenteditable=true. When I click on any of them, I get a blinking cursor at the point I clicked, and I am able to edit the contents of the DIV. When I click elsewhere, the cursor goes away indicating focus has been lost.

However, none of my above functions every gets called. How am I supposed to be detecting when one of the inline editors gets and loses focus?

I have looked at the API and I don't actually see on being a method of the global CKEDITOR singleton, so I'm not sure how this is even supposed to work. The method is definitely there though.

Update: I tried using a different ckeditor (https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.7/ckeditor.js instead of the version that I built and downloaded for my site) and that version works but only for the instanceReady event. I'm using the same version number as on my site, but I'm sure I have not built with all the same plug-ins, therefore I suspect there must be an issue with a plug-in.

I also noticed that even though I have contenteditable=true on my div, when I select it and it becomes active, the element doesn't actually change any, that is, CKEDITOR does not seem to be replacing it with anything to do the editing. This would explain why the blur and focus events aren't firing, but why isn't CKEDITOR taking control?

Michael · Answer 1 · 2017-05-24T23:30:48.730

Elements that are created after CKEditor loads won't automatically use it. The inlineAll function must be called. The documentation describes this function by saying "Turns a DOM element with the contenteditable attribute set to true into a CKEditor instance." This was confusing to me, because I was thinking that I wouldn't want the element to become a true CKEditor instance until it was clicked on. However, this is not saying that an edit session will be started, only that it will be set up to become editable by CKEditor.

If there are any other CKEditors present, they must be removed first, or inlineAll will fail. So the following code will get rid of any present and then recreate them all:

for (i in CKEDITOR.instances) { 
    CKEDITOR.instances[i].destroy()
}
CKEDITOR.inlineAll()

ckeditor global events not firing on inline editors

1 Answers1