如何使用 jQuery 监听 CKEditor 事件 setData？

Question

也许现在已经晚了，但为什么找到方法做到这一点如此困难？我的主要目标是增加 jQuery 滑块以显示用户已用完最大文本长度。我有理由不显示确切的字符计数，但这对于字符计数（包括所有 HTML 标记）来说是有效的。

$("#desc").ckeditor(function() {

        ITDUtil.log("ckeditor loaded") 

        // $(this).bind('setData.ckeditor', function(e){
        //  
        //  console.log(e.val().length);
        //  $("#desc_character_slider").slider("option", "value", e.val().length);
        //  
        // });

        // var editor = $('#desc').ckeditorGet();
        // alert( editor.checkDirty() );

        // how to properly set an event listener for setData?
        $(this).bind("setData.ckeditor", function(e){
            console.log(e.val().length);
        });

        // is it this.on("setData",function(){}) ?
        //                "setData.ckeditor"?

    },
    { 
        toolbar : 'custom'
    }
);

更新：这就是我最终所做的，但它并不那么优雅，因为 setTimeout 每 100 毫秒触发一次来检查内容长度是否已更改，但它有效。我有一种感觉 setData 事件不是我应该监听的。粘贴和键盘输入是否足够？

function updateCharCounts() {

    $("#desc_character_slider").slider("option", "value", $("#desc").val().length);
    $("#culture_character_slider" ).slider("option", "value", $("#culture").val().length);

    setTimeout(updateCharCounts, 100);
}

其他研究表明，如果您 console.log editorObj._.events，“setData”不是可用的事件。这是CKEditor主要缺乏的；希望文档更好，插件会非常方便。需要盯着可用的插件来获取灵感。

监听键盘输入和粘贴事件是否足够？当您标记某些样式并仅使用按钮时该怎么办？您基本上需要监听所有这些以确保您获得所有内容，在这种情况下，为什么不直接执行 setTimeout 方法来省去麻烦呢？

更新2：另一个需要是限制各种服务的字符，尽管这可以在后端完成并截断，但保持 FE 同步总是好的。

Answer 1

实际上我说 setData 仅当用户单击“源”按钮（双向 html <-> 富文本编辑）时才会触发。因此它与显示实时长度计数器无关。
如果您需要在 keyup() 上触发事件，您可以使用以下命令：

editor.on( 'key', function( evt ){
    alert("key pressed. Content is now: "+evt.editor.getData());
    } );

editor 变量是在您设置编辑器时创建的：
var editor=CKEDITOR.replace("textarea_"+hashArticleNew);//纯 javascript

$el=$(".wa_ckeditor").ckeditor();
var editor = $el.ckeditorGet();

它有效！ （CK编辑器3.6.2）

Answer 2

来自 CKEditor 文档：

每个回调函数将
在上下文中执行
CKEDITOR.editor 对象（所以这将
是编辑器）和 DOM 元素
对象将作为参数传递。

根据上面的内容，CKEditor 回调中的 $(this) 是无效的，因为 this 是自定义对象，而不是 DOM 元素。请尝试以下操作：

$("#desc").ckeditor(function(element) {
        ITDUtil.log("ckeditor loaded");

        $(element).bind("setData.ckeditor", function(e){
            console.log(e.val().length);
        });
    },
    { 
        toolbar : 'custom'
    }
);

如果这不起作用，您应该能够找到保存编辑器界面的 DOM 元素 (this.container) 或创建编辑器的 DOM 元素 (this.element）。另请注意，CKEditor 事件也会在 DOM 中冒泡，因此您可以在此过程中的任何位置绑定事件。