add code for event listener for keypress in ckeditor

问题

I need to add an event listener for keypress after the CKEditor is loaded. The code is something like:

CKEDITOR.instances.editor1.document.on('key', function(event) {
    /* instructions   */
});

Any idea where can I add the code for that? In which file or in what way?

回答1:

Code to archive it is something like this:

CKEDITOR.on('instanceCreated', function(e) {
        e.editor.on('contentDom', function() {
            e.editor.document.on('keyup', function(event) {
                // keyup event in ckeditor
            }
        );
    });
});

Edit - 2014 - Since this answer is still getting some upvotes, i felt it would be fair to point out, that it was meant for CKEditor in version 3.x. With the version 4.x there is a change event, which will trigger not only on key events but also after pasting, undo, redo etc.

In code its something like this:

CKEDITOR.on('instanceCreated', function(e) {
    e.editor.on('change', function (event) {
        // change event in CKEditor 4.x
    });
});

回答2:

Do you need to track changes?

I was originally using the solution above, but I ended up replacing it with the OnChange CKEditor plugin. This is useful in some special cases - for example, if you add a link using the toolbar, keypress won't register anything.

Here's a code example, updated to use instanceCreated (install OnChange first):

CKEDITOR.on('instanceCreated', function(e) {
    if (e.editor.name === editorId) { //editorId is the id of the textarea
        e.editor.on('change', function(evt) {
            //Text change code
        });
    }
});

Update: According to the answer above, CKEditor now has a built-in change event, so you don't have to install the plugin to use this solution anymore. You can still use the second line of code to apply the change to the instance of CKEditor you want to edit.

回答3:

If the keydown logic makes sense for a given plugin, you can include it in the plugin's definition:

CKEDITOR.plugins.add('customPlugin', {
    // definition keys...
    init: function( editor ) {
        // Plugin logic
        ...

    // Register a  keydown event handler -- http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-key
    editor.on('key', function(event) {
        console.log('CKEDITOR keydown event from customPlugin'); // successfully captures keydown when registered from plugin
    }
});

回答4:

I've tested some of the solutions proposed here and I got my anwser when I found this link: http://alfonsoml.blogspot.com.br/2011/03/onchange-event-for-ckeditor.html

The following code worked like a charm:

editor.on('contentDom', function()
{
    editor.document.on('keydown', function( event )
    {
        if ( !event.data.$.ctrlKey && !event.data.$.metaKey )
            somethingChanged();
    }); 
});

回答5:

CKEDITOR.instances.editor1.on('change', function () { //Do something here.});

This code registers any change event including copy-paste.

回答6:

You add that code in your page, or in a .js file included in your page. There is no mystery about that code.

来源：https://stackoverflow.com/questions/6386423/add-code-for-event-listener-for-keypress-in-ckeditor

标签

javascript

ckeditor