CKEditor keyup event and capturing data from inline editors

问题

I'm trying to create a document with multiple inline CKEditor fields, and keyup is throwing me for a loop. The "key" event works fine(but doesn't get the last character entered), however "keyups" aren't caught at all, unless I use the editor.document.on, which is what several other answers happily provided.

Unfortunately, since I have multiple(over 13) possible fields, the event seems to not return anything with it other than just the event itself. No target information(I need the ID to pass to my save data function), nor the editor(to retrieve the content).

The objective is to save and validate the data being entered, as it's being entered. I call them fields in my mind, but they're all divs(thus the inline editing).

Javascript:

$(function(){

CKEDITOR.disableAutoInline = true;

$("div[contenteditable='true']" ).each(function( index ) {

    var content_id = $(this).attr('id');

    CKEDITOR.inline( content_id, {
        customConfig: '/majors/ckconfig.js'} );      
});


CKEDITOR.document.on('keyup', function(event){
      console.log(event.editor.getData()); // need to get the data, and the ID of the element.      
});
});

回答1:

Why don't you use editor#change event?

var editor = CKEDITOR.inline( content_id,
    { customConfig: '/majors/ckconfig.js' } ); 

editor.on( 'change', function() {
    console.log( editor.getData() );
} );

As for keydown, if you're still interested, you can add listener directly to the editable element:

var editor = CKEDITOR.inline( content_id,
    { customConfig: '/majors/ckconfig.js' } ); 

editor.on( 'contentDom', function() {
    var editable = editor.editable();
    editable.attachListener( editable, 'keyup', function() {
        console.log( editor.getData() );
    } );
} );

Read more about used methods in the editable#attachListener method documentation.

来源：https://stackoverflow.com/questions/24375780/ckeditor-keyup-event-and-capturing-data-from-inline-editors

标签

javascript

ckeditor