Use of ckeditor “key” CKEDITOR.instances.editor.on('key', function (e){

Question

I realize there are questions about how to implement an event handler for CKEDITOR 4. I am able to use this code to get the key-down data, but I can't seem to get the data after a key-up:

CKEDITOR.instances.editor.on('key', function (e){
    document.getElementById("preview").innerHTML = CKEDITOR.instances.editor.getData();
});

So when I type a string like "aaa" into the text editor field, the first character is never fetched. So my div id="preview" will only show "aa". I've iterated over the e object, which is quite complex, but nothing there strikes me as useful to solving this.

I also don't see other people writing about this. There doesn't seem to be a "keyup" event in CKEDITOR, though I see it written about a lot. "keyup" must have been in older versions?

I hope I have clearly stated my problem.

Answer 1

This works:

CKEDITOR.instances['editor'].on('contentDom', function() {
    CKEDITOR.instances['editor'].document.on('keyup', function(event) {
        document.getElementById("preview").innerHTML = CKEDITOR.instances.editor.getData();
    });
});

I'll wait a bit before checking as answer, in case others would like to contribute.

Answer 2

This is a correct way:

editor.on( 'contentDom', function() {
    editor.editable().attachListener( 'keyup', editor.document, function( evt ) {
        // ...
    } );
} );

There are some rules regarding listening on DOM events. See:

• editor#contentDom event,
• editable#attachListener method.

Also, I'd rather avoid calling editor.getData() on every keyup. This method is not very lightweight - it does a lot more than simple reading .innerHTML. Thus, you should think of periodic update (when the editor is focused) or the onchange plugin.

Answer 3

I think you can use onChange plugin : http://ckeditor.com/addon/onchange

...
on: {
    change: function(event) {
        // your code
    }
}
...

Answer 4

its work for me

CKEDITOR.on('instanceCreated', function(e) {
    e.editor.on('contentDom', function() {
        var editable = e.editor.editable();
        editable.attachListener(editable, 'keyup', function() {
            var content = editable.getData()
            //your content               
        });
    });
}); 

Answer 5

For me it was not working because keyup has not been fired. I combined this answer here with the suggestion to use setTimeout here. And now it works for me. Additionally I'm using the key event in source code view and change event in WYSIWYG view. I ignore CTL and CMD (1114203, 1114129) to be able to correctly recognize c&p in source code view. 200 ms seems enough time for my case.

  CKEDITOR.instances.editor.on('key', function (e) {
    if ([1114203, 1114129].indexOf(e.data.keyCode) === -1) {
      setTimeout(() => {
        let data = CKEDITOR.instances.editor.getData()
        // do something with data
      }, 200)
    }
  }.bind(this))

  CKEDITOR.instances.editor.on('change', function () {
    let data = CKEDITOR.instances.editor.getData()
    // do something with data
  }.bind(this))