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

UPDATE：这就是我最终要做的事情，但它并不那么优雅，因为setTimeout会每隔100ms触发一次，检查内容长度是否已经改变，但是它有效。我有一种感觉，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

来自CKEditor文档：

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

根据以上所述，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'
    }
);

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

Answer 2

实际上我声明只有当用户点击“来源”按钮时才会触发setData（在html＆lt; - ＆gt;富文本编辑方向）。因此，它与显示实时长度计数器无关。如果需要在keyup（）上触发事件，可以使用以下命令：

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

设置编辑器时会创建编辑器变量： var editor = CKEDITOR.replace（“textarea _”+ hashArticleNew）; //纯javascript

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

有效！（CKEditor 3.6.2）

如何用jQuery监听CKEditor事件setData？

2 个答案: