javascript - CKEditor keyup 事件和从内联编辑器捕获数据

Question

我正在尝试创建一个包含多个内联 CKEditor 字段的文档，而 keyup 让我陷入了循环。 “key”事件工作正常(但没有输入最后一个字符)，但是根本没有捕获“keyups”，除非我使用 editor.document.on，这是其他几个愉快提供的答案。

不幸的是，因为我有多个(超过 13 个)可能的字段，所以除了事件本身之外，事件似乎没有返回任何东西。没有目标信息(我需要 ID 传递给我的保存数据功能)，也没有编辑器(检索内容)。

目标是在输入数据时保存和验证输入的数据。我在脑海中称它们为字段，但它们都是 div(因此是内联编辑)。

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

Answer 1

你为什么不使用editor#change事件？

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

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

关于keydown，如果你还有兴趣，可以直接在editable元素中添加listener:

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

在 editable#attachListener 中阅读有关使用方法的更多信息方法文档。