1

Whenever my script calls setData or changes the mode ("source", "WYSIWYG"), the Listeners for the Events I have assigned, are no longer called.

Research has taught me why and I have been experimenting with suggested solutions (CKEDITOR.setData prevents attaching of events with .on function), including those from the official documentation (http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-contentDom), but none of the resolutions work for me as documented, and I have no idea why.

Has anyone else here managed to resolve this issue? If so, I would be most grateful to find out how.

We are current running version 4.5.10 of CKEditor.

Thanking you in anticipation. Ken.

Example:

// Works until setData() is called or until the view mode is changed ("WYSIWYG", "SOURCE).

ev.editor.document.on( 'keydown', function( evt )
{
    console.log("Key Down");
});

// This appears to be the recommended resolution however, this does not
    // work for me even prior to setData() being called of the view mode being changed.

    editor.on( 'contentDom', function() {
    var editable = editor.editable();

    editable.attachListener( editor.document, 'keydown', function() {
    console.log("Key Down"); // Never executed
        } );
    } );

UPDATE: This solution (suggested by Dekel) looks to me as it should work. However, I suspect that I have not implemented it correctly so the Key Down event is not firing. Any thoughts on this:

for (var i in CKEDITOR.instances) {
    CKEDITOR.instances[i].on('contentDom', function() {
        CKEDITOR.instances[i].document.on('keydown', function(event) {
            console.log('key down')
        });
    });
}

UPDATE: Full code example. The event no longer appears to fire:

    <html>

<textarea name="editor1">
</textarea>

<textarea name="editor2">
</textarea>

<textarea name="editor3">
</textarea>

</html>

<script>

CKEDITOR.replace( 'editor1', {
  allowedContent: true
});

CKEDITOR.replace( 'editor2', {
  allowedContent: true
});

CKEDITOR.replace( 'editor3', {
  allowedContent: true
});

for (var i in CKEDITOR.instances) {
    CKEDITOR.instances[i].on('contentDom', function() {
        CKEDITOR.instances[i].document.on('keydown', function(event) {
            console.log('key down')
        });
    });
}

</script>
7
  • Add an example...
    – Dekel
    Sep 21, 2016 at 18:52
  • // Works until setData() is called or until the view mode is changed ("WYSIWYG", "SOURCE). ev.editor.document.on( 'keydown', function( evt ) { console.log("Key Down"); }); // This appears to be the recommended resolution however, this does not // work for me even prior to setData() being called of the view mode being changed. editor.on( 'contentDom', function() { var editable = editor.editable(); editable.attachListener( editor.document, 'keydown', function() { console.log("Key Down"); // Never executed } ); } );
    – Ken Haynes
    Sep 21, 2016 at 21:07
  • Apologies for the format. I am new here. How would I go about getting newlines in the example?
    – Ken Haynes
    Sep 21, 2016 at 21:08
  • Just edit your original question.
    – Dekel
    Sep 21, 2016 at 21:12
  • And a working example (jsfiddle.net / so-snippet is much better).
    – Dekel
    Sep 21, 2016 at 21:12

1 Answer 1

2

Took some time to understand what the problem is, but I think this is the solution that you are looking for.

You need to attach the keydown event everytime the DOM is ready. To do so - you need to listen to the contentDom event of the editor, and then to register the keydown event on the editor's document.

CKEDITOR.instances.editor1.on( 'contentDom', function() {
    CKEDITOR.instances.editor1.document.on('keydown', function(event) {
        console.log('key down')
    });
});

In this example - editor1 is the name of the ckeditor instance.

You can check this working example:
https://jsfiddle.net/gad701dc/

In case you have multiple instances you will need to loop over them and add it to each of them:

for (var i in CKEDITOR.instances) {
    CKEDITOR.instances[i].on('contentDom', function() {
        // The variable *this* here refers to the current instance of the ckeditor
        this.document.on('keydown', function(event) {
            console.log('key down')
        });
    });
}

You need to access the relevant editor, you should do it with this instead of CKEDITOR.instances[i], because the i variable will change before the call to the callback function will be made.

15
  • Excellent working example, thank you. There are multiple editor instances in use and I typically use CKEDITOR.currentInstance. However, this is now showing as undefined. I have tried adding your code to the instanceReady event, but the currentInstance is still showing as undefined. Any thoughts on this?
    – Ken Haynes
    Sep 22, 2016 at 18:06
  • Updated the answer, check the addition in the end
    – Dekel
    Sep 22, 2016 at 18:10
  • Thanks Dekel. I appreciate the quick response. I have responded via my original post.
    – Ken Haynes
    Sep 22, 2016 at 18:55
  • Just a reminder I still haven't got this working yet. Thanks.
    – Ken Haynes
    Sep 22, 2016 at 22:08
  • It's impossible to help without knowing what the problem is. Create a jsfiddle with your code, demonstrate the problem...
    – Dekel
    Sep 22, 2016 at 22:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.