单击CKEditor内容以显示警报 [英] Clicking CKEditor content to show alert

问题描述

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

I'm trying to make it so that if you click the CKEditor's text area (where you type), it shows an alert, but I can't get it working and I'm not sure why.

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

Here's the 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");
});

推荐答案

问题

使用委派事件处理程序，您将捕获任何点击事件具有类 cke_contents 的元素将存在于文档中。而且你做对了。

The problem

With delegated event handler you are capturing click events for any elements with class cke_contents that will ever exist in the document. And you are doing it right.

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

The problem is that .cke_contents is never clicked. It never handles click event. You can click it from code and your alert pops up.

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

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

This is because of an iframe filling the full area of .cke_contents. Events are not propagated across frames, nor are they generated independently for the frame.

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

You can set event handler inside the iframe. You can access its contents as it does not violate same-origin policy (both the document and the frame have the same document.domain).

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

jQuery.contents（） 返回 iframe 的内容文档，如果它没有违反同源政策。

jQuery.contents() returns its content document for iframe, if it does not violate same-origin policy.

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

Problem is that instanceReady is triggered for each CKEditor instance and the code above adds click handler to all CKEditors, therefore the handlers could be duplicated.

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

However, this can be solved by assigning the handlers more locally, just to the currently becoming ready editor:

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

这可以正常工作，你可以在 JsFiddle 。

This works OK as you can see on JsFiddle.

最初我没有得到 jQuery事件委托，并认为你正在尝试添加你的活动具有 .cke_contents 的元素之前的处理程序（您的代码执行得更早）。如果没有事件委托，您将需要使用CKEditor API，即 instanceReady 编辑器事件，只有这样，您才能确保将事件处理程序添加到现有元素中。 （ $（document）.ready（...）; ）仍然太早，因为你可以通过 console.log（$（'。cke_contents'）。toSource（））; 。

Originally I did not get jQuery event delegation and thought you are trying to add your event handler before the element with .cke_contents exists (your code is executed much earlier). Without event delegation you would need to use CKEditor API, namely instanceReady event of the editor, only that way you can be sure you are adding your event handler to an already existing element. ($(document).ready(…);) is still too early as you can see via console.log($('.cke_contents').toSource());.

BTW你手动用CKEditor替换textarea的尝试只是因为它已被替换而引发异常。尝试将其包装在 try {...} catch（e）{console.log（e）; } 看到它。

BTW your attempt to replace your textarea with CKEditor manually just throws an exception as it already has been replaced. Try wrapping it in try {…} catch (e) { console.log(e); } to see it.

这篇关于单击CKEditor内容以显示警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！