问题

Question

我正在努力使它如果你单击CKEditor的文本区域（你键入的地方），它会显示一个警告，但我无法让它工作，我不知道为什么。

这是JSFiddle：http://jsfiddle.net/C7N7r/44/

请帮忙！

HTML：

<form>
    <textarea class="ckeditor" id="editor1">Some text.</textarea>
</form>

JS：

CKEDITOR.replace("editor1", {});

$(document).on("click", ".cke_contents", function() {
    alert("CLICKED");
});

Answer 1

您可以使用CKEditor API以简单的方式执行此操作：

function clickListener(e) {
    alert("clicked")    
}

CKEDITOR.on('instanceReady', function(ev){
    ev.editor.editable().attachListener(ev.editor.document, "click", clickListener)
})

演示http://jsfiddle.net/up3HG/1/

Answer 2

问题

使用delegated event handler，您将捕获文档中将存在的具有类cke_contents的任何元素的点击事件。你做得对。

问题是永远不会点击.cke_contents。它永远不会处理click事件。您可以从代码中单击它，然后会弹出警报。

CKEDITOR.on('instanceReady', function(){$('.cke_contents').click()})

这是因为iframe填充了.cke_contents的整个区域。事件不是跨帧传播的，也不是为帧独立生成的。

如何解决

您可以在iframe内设置事件处理程序。您可以访问其内容，因为它不违反同源策略（文档和框架具有相同的document.domain）。

CKEDITOR.on('instanceReady', function() {
    $('.cke_contents iframe').contents().click(function() {
        alert('Clicked!');
    });
});

jQuery.contents()会返回iframe的内容文档，如果它不违反同源政策。

问题是每个CKEditor实例都会触发instanceReady，上面的代码会将click处理程序添加到所有CKEditor，因此可以复制处理程序。

但是，这可以通过在本地更多地分配处理程序来解决，只是对当前正在准备好的编辑器：

CKEDITOR.on('instanceReady', function(evt) {
    $(evt.editor.container.$).find('iframe').contents().click(function() {
        alert('Clicked!');
    });
});

这可以正常，因为您可以在JsFiddle上看到。

旁注

最初我没有得到jQuery event delegation，并且认为您在.cke_contents元素存在之前尝试添加事件处理程序（您的代码执行得更早）。如果没有事件委派，您将需要使用CKEditor API，即instanceReady event of the editor，只有这样您才能确保将事件处理程序添加到现有元素中。（$(document).ready(…);）仍然太早，因为您可以通过console.log($('.cke_contents').toSource());看到。

顺便说一下，你手动用CKEditor替换你的textarea的尝试只是抛出一个异常，因为它已经被替换了。尝试将其包裹在try {…} catch (e) { console.log(e); }中以查看它。

Answer 3

是不是只使用了错误的类选择器？请改用.ckeditor：

$(document).ready(function() {
    $(document).on("click", ".ckeditor", function() {
        alert("Clicked!");
    });
});

单击CKEditor内容以显示警报

3 个答案:

问题

如何解决

旁注