CKEditor键入事件，并从嵌入式编辑器捕获数据

问题描述

我正在尝试创建具有多个内联CKEditor字段的文档，而键盘输入使我陷入循环."key"事件工作正常(但不会输入最后一个字符)，但是除非我使用editor.document.on，否则根本不会捕获"keyups"，这是其他一些愉快的答案.

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.

不幸的是，由于我有多个(超过13个)可能的字段，因此该事件似乎不返回任何内容，而不仅仅是事件本身.没有目标信息(我需要ID传递给我的保存数据功能)，也没有编辑器(以检索内容).

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

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

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:

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

推荐答案

为什么不使用编辑器#change 事件?

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

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

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

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

在 editable#attachListener中，详细了解二手方法. 方法文档.

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

这篇关于CKEditor键入事件，并从嵌入式编辑器捕获数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！