我试图让它如此，以便如果您单击CKEditor的文本区域（您键入的内容），它会显示警报，但我无法使其工作，而且我不确定为什么。单击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"); 
});

来源

2014-01-30 Bagwell

问题

随着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，并且上面的代码向所有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); }中以查看它。

来源

2014-01-31 01:40:35 Palec

顺便说一句[自动替换'textarea']（http://nightly.ckeditor.com/14-01-31-07-05/ standard/samples/replacebyclass.html）是通过'class =“ckeditor”'实现的。 – Palec

我遇到了问题。如果我在CKEditor的主体（'.cke_editable'）中点击，它不会发出点击事件。 – Bagwell

@Bagwell在我的浏览器（Firefox 17.0.11）中运行良好。如果我点击CKEditor编辑区域的任何地方，弹出警报。它没有理由不弹出。这个事件并不是通过iframe传播的，这就是为什么我使用handler来添加所有的东西。你使用哪个浏览器？ – Palec

是它不使用只是错误的类选择？使用.ckeditor代替：

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

来源

2014-01-31 00:13:53

不，没有工作。 – Bagwell

奥普斯，我真的不应该从我的手机浏览器做到这一点:-) –

您可以使用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/

来源

2014-01-31 09:33:21 AlfonsoML

你在JsFiddle的'ev.editor.document'中忘记了'.document'。但好的解决方案！ +1 – Palec

单击CKEditor内容以显示警报

回答

问题

如何解决呢

旁注

相关问题