CODEWITHSUNDEEP
eventsevent-handlingckeditor
TARKUS
TARKUS

Reputation: 2200

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

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.

Upvotes: 3

Views: 7653

Answers (5)

tomas
tomas

Reputation: 1

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))

Upvotes: 0

user6097216
user6097216

Reputation:

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               
        });
    });
});

Upvotes: 1

TARKUS
TARKUS

Reputation: 2200

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.

Upvotes: 7

EpokK
EpokK

Reputation: 38092

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

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

Upvotes: 1

Reinmar
Reinmar

Reputation: 22023

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:

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.

Upvotes: 2

Related Questions