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

CKEditor keyup event and capturing data from inline editors

本文关键字：编辑器 数据 keyup 事件 CKEditor      更新时间：2023-09-26

我试图创建一个具有多个内联CKEditor字段的文档，keyup正在把我扔进一个循环。"key"事件工作正常(但不会输入最后一个字符)，但是"keyup"根本不会被捕获，除非我使用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.      
});
});

为什么不使用editor#change event呢?

var editor = CKEDITOR.inline( content_id,
    { customConfig: '/majors/ckconfig.js' } ); 
editor.on( 'change', function() {
    console.log( editor.getData() );
} );

对于keydown，如果您仍然感兴趣，可以直接向可编辑元素添加侦听器:

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方法文档中阅读更多使用的方法。

相关文章：