使用 Jquery 从 CKEditor 检测 onChange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5143516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detecting onChange events from a CKEditor using Jquery
提问by Gazillion
I'm working with the CKEditor and jQuery and I'd like to toggle a flag to true whenever a user changes the value of a field. One of those fields is a CKEditor instance.
我正在使用 CKEditor 和 jQuery，我想在用户更改字段值时将标志切换为 true。这些字段之一是 CKEditor 实例。
All the textareas that have the "wysiwyg" class get converted to CKEditors but somehow the $('.wysiwyg').change()event never gets detected. I did some googling but the keyword combination seems to bring up nothing but irrelevant results (my google-fu sucks).
所有具有“所见即所得”类的文本区域都被转换为 CKEditor，但不知何故$('.wysiwyg').change()从未检测到该事件。我做了一些谷歌搜索，但关键字组合似乎带来了无关紧要的结果（我的 google-fu 很烂）。
Thanks for any help :)
谢谢你的帮助 ：）
Edit:
编辑：
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('click', function() {alert('test 1 2 3')});
}
I tried the code above and it doesn't work. It doesn't give me an error meaning that it finds the CKEditor objects but for some reason the listener isn't attached to it?
我尝试了上面的代码，但它不起作用。它没有给我一个错误，意味着它找到了 CKEditor 对象，但由于某种原因侦听器没有附加到它？
Also, if I replace the event attachment with just alert(CKEDITOR.instances[i].name);it'll alert the name of my textarea so I know I'm not trying to attach the click event to nothing :)
另外，如果我只用alert(CKEDITOR.instances[i].name);它替换事件附件，它会提醒我的文本区域的名称，所以我知道我不会尝试将点击事件附加到任何内容:)
回答by AlfonsoML
You can get a plugin (and an explanation about what things are detected as changes) in this post: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.htmlso you can do things like
你可以在这篇文章中获得一个插件（以及关于哪些东西被检测为变化的解释）：http: //alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html所以你可以做这样的事情
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('change', function() {alert('test 1 2 3')});
}
回答by Alexei Tenitski
I haven't managed to get onchange working however onblur seem to work which may be sufficient for your needs
我还没有设法让 onchange 工作，但是 onblur 似乎可以工作，这可能足以满足您的需求
CKEDITOR.instances['name'].on('blur', function() {alert(1);});
回答by Garry English
There is now a change event: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change
现在有一个更改事件：http: //docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change
The following is working for me using version 4.4.3. You need to handle when the Source and HTML changes.
以下使用 4.4.3 版对我有用。您需要处理 Source 和 HTML 更改时的情况。
// Initialize the rich text editor.
var bodyEditor = CKEDITOR.replace('emailTemplate_Body',
{
readOnly: false
});
// Handle when the Source changes.
bodyEditor.on('mode', function () {
if (this.mode == 'source') {
var editable = bodyEditor.editable();
editable.attachListener(editable, 'input', function () {
alert('source changed');
});
}
});
// Handle when the HTML changes.
bodyEditor.on('change', function () {
alert('change fired');
});
回答by Peto
I got it!
我知道了！
First I had the editors on my web created as textareas with the class ckeditor, and I let the ckeditor.js make them richTextEditors. Then I tried distinct solutions from the other answers, but couldn't make them work.
Then I changed the class name (to CKeditor), so I have to initialize the editors in my code. I tried this and it works:
首先，我将网络上的编辑器创建为带有类 ckeditor 的 textareas，然后我让 ckeditor.js 使它们成为 RichTextEditor。然后我尝试了与其他答案不同的解决方案，但无法使它们起作用。
然后我更改了类名（到 CKeditor），所以我必须在我的代码中初始化编辑器。我试过这个，它有效：
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
$('.CKeditor').ckeditor(function(){
this.on('blur', function({if(this.checkDirty())alert('text changed!');});
});
So when a editor loses the focus it checks if it's dirty, and if it is then it fires the changed function (the alert in this example).
因此，当编辑器失去焦点时，它会检查它是否脏，如果是，则触发更改的函数（本例中的警报）。
Later I've tried again with the onchanges plugin, in this way:
后来我又用onchanges插件试了一下，是这样的：
$('.CKeditor').ckeditor();
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('change', function() {alert('text changed!');});
}
Now it works with the plugin too (thanks @Alfonso). But I think that the plugin makes the changes event fire too much, I prefer the first solution where changes are only evaluated on blur.
现在它也适用于插件（感谢@Alfonso）。但我认为该插件使更改事件触发太多，我更喜欢第一个解决方案，其中更改仅在模糊时进行评估。
Hope this helps! and thanks to all for your help.
希望这可以帮助！并感谢大家的帮助。
回答by Ryan Wright
The CKEditor has function a 'checkDirty()'. The simplest way to check if the CKEditor value has been changed is to add this piece of JS in your Code.
CKEditor 具有功能 a 'checkDirty()'。检查 CKEditor 值是否已更改的最简单方法是在您的代码中添加这段 JS。
CKEDITOR.instances['emailBody'].on('blur', function(e) {
if (e.editor.checkDirty()) {
var emailValChanged=true; // The action that you would like to call onChange
}
});
Note: emailBody- is the id of your textarea field
注意：emailBody- 是您的 textarea 字段的 id
回答by Simon
Best I can do, basically gives you an indication as to if the content of the editor has changed from the original state.
尽我所能，基本上可以告诉您编辑器的内容是否已从原始状态更改。
var editor = $('#ckeditor').ckeditorGet();
editor.on("instanceReady", function(){
this.document.on("keyup", function(){
console.log(editor.checkDirty());
});
});
回答by Gazillion
I haven't come up with a solution but the following link talks more about the events available witht he CKEditor:
我还没有提出解决方案，但以下链接更多地讨论了 CKEditor 可用的事件：
http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html
http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html
This is not the perfect solution I was looking for but I'm using the following to flag that my content has been modified:
这不是我正在寻找的完美解决方案，但我使用以下内容来标记我的内容已被修改：
CKEDITOR.on('currentInstance', function(){modified = true;});
This doesn't actually mean the content has been modified but that the user has focused or blurred from the editor (which is better than nothing).
这实际上并不意味着内容已被修改，而是用户已从编辑器中聚焦或模糊（这总比没有好）。
回答by Flegoff
For event change download the plugin onchange http://ckeditor.com/addon/onchangeand do this
对于事件更改下载插件 onchange http://ckeditor.com/addon/onchange并执行此操作
var options_cke ={
toolbar :
[
{ name: 'basicstyles', items :['Bold','Italic','Underline','Image', 'TextColor'] },
{ name: 'paragraph', items : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','BGColor' ] },
{ name: 'font', items : [ 'Font','Styles']}
],
on :
{
change :function( ev )
{
//ev.editor.focus();
console.log(ev);
}
}
};
var editor=$('yourCkeEditorID').ckeditor(options_cke);
回答by user1005462
editor = CKEDITOR.appendTo('container', {resize_enabled: false});
editor.on('key', function () { setTimeout(setHtmlData,10); });
etc
等等
回答by Simon H
from what I can see on the CKEditor documentation site CKEditor comes with built event handling. This means that you should use that instead of JQuery to listen to the onChange event. This is also mainly because when editors like CKEditors create their "fancy" uis you will end up listening to the wrong element for a change. I believe if you can get the reference of the CKEditor javascript object you should be able to write something like this:
从我在 CKEditor 文档站点上看到的内容来看，CKEditor 带有内置的事件处理功能。这意味着您应该使用它而不是 JQuery 来监听 onChange 事件。这也主要是因为当像 CKEditors 这样的编辑器创建他们的“花哨”用户界面时，您最终会听到错误的元素进行更改。我相信如果您可以获得 CKEditor javascript 对象的引用，您应该能够编写如下内容：
ckRefObj.on('onChange', function() { /* do your stuff here */ });
I hope this helps.
我希望这有帮助。
