使用Jquery从CKEditor检测onChange事件

我正在与CKEditor和jQuery,我想切换一个标志为true,每当用户更改字段的值。 其中一个领域是一个CKEditor实例。

所有具有“wysiwyg”类的textareas都转换为CKEditor,但不知何故$('.wysiwyg').change()事件永远不会被检测到。 我做了一些谷歌search,但关键字组合似乎只会带来什么,但不相关的结果(我的谷歌福吸)。

谢谢你的帮助 :)

编辑:

 for (var i in CKEDITOR.instances) { CKEDITOR.instances[i].on('click', function() {alert('test 1 2 3')}); } 

我试过上面的代码,它不工作。 它不会给我一个错误,这意味着它findCKEditor对象,但由于某种原因,听众没有附加到它?

另外,如果我用alert(CKEDITOR.instances[i].name);replace事件附件, 它会提醒我的textarea的名称,所以我知道我不是试图将点击事件附加到没有:)

你可以在这篇文章中得到一个插件(以及关于检测到的变化的解释): 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')}); } 

我没有设法让交换工作,但是onblur似乎工作可能足以满足您的需求

 CKEDITOR.instances['name'].on('blur', function() {alert(1);}); 

我知道了!

首先,我把我的网页上的编辑器创build为类ckeditor的textareas,并让ckeditor.js使它们成为richTextEditor。 然后,我尝试了其他答案的独特解决scheme,但无法使其工作。
然后我改变了类名(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!');}); }); 

所以当一个编辑失去焦点时,它会检查它是否脏,如果是,则会触发已更改的函数(本例中的警报)。

后来我再次尝试用onchanges插件,这样:

 $('.CKeditor').ckeditor(); for (var i in CKEDITOR.instances) { CKEDITOR.instances[i].on('change', function() {alert('text changed!');}); } 

现在它也可以使用插件(谢谢@Alfonso)。 但是我认为这个插件使得这个更改事件触发得太多了,我更喜欢第一个解决scheme,在这个解决scheme中只对blur进行了更改。

希望这可以帮助! 并感谢所有的帮助。

现在有一个更改事件: http : //docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

以下是使用版本4.4.3为我工作。 您需要处理源和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'); }); 

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

注意: emailBody – 是你的textarea字段的ID

我能做的最好的,基本上给你一个指示,如果编辑器的内容已经改变了原来的状态。

 var editor = $('#ckeditor').ckeditorGet(); editor.on("instanceReady", function(){ this.document.on("keyup", function(){ console.log(editor.checkDirty()); }); }); 

我还没有提出一个解决scheme,但下面的链接更多地谈到CKEditor可用的事件:

http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html

这不是我正在寻找的完美解决scheme,但我正在使用以下内容来标记我的内容已被修改:

 CKEDITOR.on('currentInstance', function(){modified = true;}); 

这实际上并不意味着内容已被修改,而是用户已经从编辑器中聚焦或模糊(这比没有好)。

对于事件更改下载插件onchange http://ckeditor.com/addon/onchange并执行此操作;


 var options_cke = {
         工具栏:
         [
             {name:'basicstyles',项目:['Bold','Italic','Underline','Image','TextColor']},
             {name:'paragraph',items:['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','BGColor']},
                         {name:'font',items:['Font','Styles']}

         ]
                上 :
                 {
                    改变:函数(ev)
                     {
                         //ev.editor.focus();
                        的console.log(EV);
                     }
                 }

      };
  var editor = $('yourCkeEditorID')。ckeditor(options_cke);
 editor = CKEDITOR.appendTo('container', {resize_enabled: false}); editor.on('key', function () { setTimeout(setHtmlData,10); }); 

等等

从我在CKEditor文档站点上看到的CKEditor带有内置的事件处理。 这意味着你应该使用它来代替JQuery来监听onChange事件。 这也主要是因为像CK编辑这样的编辑创build他们的“幻想”用户,你最终会听到错误的元素来改变。 我相信如果你能得到CKEditor的JavaScript对象的参考,你应该可以写这样的东西:

 ckRefObj.on('onChange', function() { /* do your stuff here */ }); 

我希望这有帮助。

此代码将提醒用户点击任何侧栏链接

 $("#side-menu a").click(function(e){ if(checkUnsaved()){ if (confirm("You have unsaved changes.Do you want to save?")) { e.preventDefault(); } // or ur custom alert } }); function checkUnsaved() { if(CKEDITOR) return CKEDITOR.instances['edit-body'].checkDirty(); // edit-body is the name of textarea in my case. else return false; } 

我显然不能简单地添加评论,因为我是新来的网站,但Garry的答案是正确的,我已经独立validation它,所以我想补充一点。

CKEDITOR.instances [xxx] .on('change',function(){alert('value changed !!')});

这适用于CKEditor 4+,并捕获所有更改事件,包括撤消和重做,使得阿方索的js对于新用户来说是不必要的。

 $(document).ready(function () { CKEDITOR.on('instanceReady', function (evt) { evt.editor.on('blur', function () { compare_ckeditor('txtLongDesc'); }); }); }); 

不知道“改变”事件,但当我使用CKeditor版本3.6时,“模糊”事件对我完全适用

对于后来的Google员工,我注意到如果你用这个创buildCKEditor

 $("#mytextarea").ckeditor(); 

它工作,但在表单提交不会更新mytextarea值,因此它发送旧值

如果你这样做

 CKEDITOR.replace('mytextarea'); 

在表格上提交新的价值