使用 Jquery 从 CKEditor 检测 onChange 事件

Posted 2023-02-16

【中文标题】使用 Jquery 从 CKEditor 检测 onChange 事件

【英文标题】：Detecting onChange events from a CKEditor using Jquery

【发布时间】：2011-07-05 20:05:39

【问题描述】：

我正在使用 CKEditor 和 jQuery，并且我想在用户更改字段值时将标志切换为 true。其中一个字段是 CKEditor 实例。

所有具有“所见即所得”类的文本区域都被转换为 CKEditors，但不知何故，$('.wysiwyg').change() 事件永远不会被检测到。我做了一些谷歌搜索，但关键字组合似乎只显示不相关的结果（我的 google-fu 很烂）。

感谢您的帮助:)

编辑：

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

我尝试了上面的代码，但它不起作用。它没有给我一个错误，这意味着它找到了 CKEditor 对象，但由于某种原因，侦听器没有附加到它？

另外，如果我只用alert(CKEDITOR.instances[i].name); 替换事件附件，它会提醒我的文本区域的名称，所以我知道我没有试图将点击事件附加到任何内容:)

【问题讨论】：

这现在是核心的一部分（4.2+ 版）。见docs.ckeditor.com/#%21/api/CKEDITOR.editor-event-change。

【参考方案1】：

您可以在这篇文章中获得一个插件（以及关于哪些内容被检测为更改的说明）：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'));
    

【讨论】：

我已经将插件复制到我的目录中，并在我的 html 页面上设置了正确的路径。我的页面上只有一个 CKEDITO 实例。我写了这行 CKEDITOR.instances.text_area1.on('change', function() alert('test 1 2 3'));。但它不会触发警报。我可以错过什么吗？

您是否将插件添加到您的配置中？ （例如：config.extraPlugins = 'onchange';）。你有任何错误吗？您是否验证过插件是否真的被加载（在 firebug、Fiddler 等中使用 Network 选项卡，或者只是在其中添加一个 alert(1)）？

我对这个答案投了赞成票，因为它是在我接受正确答案后发布的（描述说这并不是一个好的解决方案）。如果 krunal 或其他人确认这是可行的，我会将正确的更改为这个:)

不，它有效。可能有什么东西阻止了您访问 blogspot？

更改功能现在已内置到 CKEditor（4.2+ 版）中。请参阅docs.ckeditor.com/#%21/api/CKEDITOR.editor-event-change 了解更多信息。

【参考方案2】：

我还没有设法让 onchange 工作，但是 onblur 似乎可以满足您的需求

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

【讨论】：

即使您没有更改文本，您仍然会收到警报消息。

正如我所说，取决于您的要求。如果您需要使用呈现的文本刷新某些内容，那么它会正常工作。

【参考方案3】：

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

以下内容适用于我使用 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');
);

【讨论】：

我在 CKEditor 看到了关于在源模式下监听更改的源代码的来源。但这对我不起作用。这对其他人有用吗？

@nuander 大约晚了 1.5 年......但是是的......这在最新的 CKEditor 4 中对我有用。bodyEditor.on('change'... 部分是您真正需要的唯一部分。

【参考方案4】：

我明白了！

首先，我使用 ckeditor 类将 Web 上的编辑器创建为 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!'););
);

因此，当编辑器失去焦点时，它会检查它是否脏，如果是，则触发更改的函数（本例中的警报）。

后来我再次尝试使用 onchanges 插件，方式如下：

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

现在它也可以与插件一起使用（感谢@Alfonso）。但我认为该插件使更改事件触发太多，我更喜欢仅在模糊上评估更改的第一个解决方案。

希望这会有所帮助！并感谢大家的帮助。

【参考方案5】：

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

【讨论】：

如果您将使用checkDirty 方法，也许您还需要使用resetDirty - 清除“脏”状态标志。

【参考方案6】：

我能做到的，基本上是告诉你编辑器的内容是否已经从原始状态改变了。

var editor = $('#ckeditor').ckeditorGet();

editor.on("instanceReady", function()                    
     this.document.on("keyup", function()
     console.log(editor.checkDirty());
   );
);

【讨论】：

这个不起作用，但下面的变体 (***.com/a/15206334/913223) 起作用了。

感谢 Simon，为我工作，@josh 我认为您应该枚举所有 ck Editor 元素（例如通过使用每个元素）并将事件附加到它们。

this.document.on("keyup"... 将捕获整个窗口上的所有 keyup 功能。如果您有多个 ckeditor，您将不知道正在编辑哪个。跨度>

keyup 函数在 ckeditor 元素上不起作用，因为实际的编辑器位于不同元素的 iframe 中。

【参考方案7】：

我还没有提出解决方案，但以下链接更多地讨论了 CKEditor 可用的事件：

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

这不是我一直在寻找的完美解决方案，但我使用以下内容来标记我的内容已被修改：

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

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

【讨论】：

哈哈，Alfonso 直接用最高分回答了这个问题，但接受的答案来自他的博客，我觉得这很有趣。

请注意，我不会经常回去检查我的旧问题（您可以看到我最初在 11 年用我的解决方案回答了。我现在刚刚查看了 Alfonso 的答案，发现他已被投票顶部有几个 cmet 声称它有效，所以我改变了正确的答案。

哦，是的，您不会从他们那里获得自动更新。我认为这对 SO 来说可能是一个很大的改进，这将有助于维护所提出的问题。我不是想成为一个混蛋，我只是觉得这很有趣:)

【参考方案8】：

要更改事件，请下载插件 onchange http://ckeditor.com/addon/onchange 并执行此操作

var options_cke = 工具栏： [ name: 'basicstyles', items :['Bold','Italic','Underline','Image', 'TextColor'] , 名称：'段落'，项目：['JustifyLeft'，'JustifyCenter'，'JustifyRight'，'JustifyBlock'，'BGColor']， 名称：'字体'，项目：['字体'，'样式'] ], 在 ： 改变：函数（ev） //ev.editor.focus(); 控制台.log(ev); ; var editor=$('yourCkeEditorID').ckeditor(options_cke);

【参考方案9】：

editor = CKEDITOR.appendTo('container', resize_enabled: false); 
editor.on('key', function ()  setTimeout(setHtmlData,10); );

等

【参考方案10】：

从我在 CKEditor 文档站点上看到的内容来看，CKEditor 带有内置的事件处理。这意味着您应该使用它而不是 JQuery 来监听 onChange 事件。这也主要是因为当像 CKEditors 这样的编辑器创建他们的“花哨”用户界面时，您最终会听到错误的元素进行更改。我相信如果你能得到 CKEditor javascript 对象的引用，你应该能够写出这样的东西：

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

我希望这会有所帮助。

【讨论】：

感谢泽西蒙。按照您的回答，我能够更接近一点，但我似乎仍然无法将事件附加到它。我在上面编辑了我的问题以显示我尝试过的内容。

同样的结果。我尝试了各种组合加上这个问题的解决方案（类似）***.com/questions/4354774/jquery-events-on-ckeditor，但仍然不起作用。

嘿抱歉，如果我不能再提供帮助...无论如何最后要注意的一件事是，根据链接的帖子，CKEditor 使用 iframe 来加载实际的 UI。这意味着您将无法响应事件，因为它们附加到当前文档的 DOM，CKEditor 被加载到 iframe 中的另一个文档中，因此您绑定不工作，因为它们引用的元素实际上并没有改变。但是，您将能够通过 javascript 检索 CKEditor 的当前实例并将事件处理程序附加到它。我现在要睡觉了，所以我不能再抱歉了。

感谢您的尝试，我很感激 :)

使用 CKEditor4.4.5，阅读文档 (docs.ckeditor.com/#!/api/CKEDITOR.event) 后，这对我有用：CKEDITOR.instances.frase1.on('change' , function() console.info('changed') )。其中 frase1 是我的 P 元素 ID

【参考方案11】：

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

$("#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;

【参考方案12】：

我显然不能简单地添加评论，因为我是该网站的新手，但 Garry 的回答是正确的，并且我已经独立验证过，所以我想添加这个。

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

这适用于 CKEditor 4+，并捕获所有更改事件，包括撤消和重做，从而使新用户不需要 Alfonso 的 js 工作。

【参考方案13】：

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

不知道 'change' 事件，但是当我使用 CKeditor 3.6 版时，'blur' 事件非常适合我

【参考方案14】：

对于后来的 Google 员工，我注意到如果您使用此创建 CKEditor

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

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

但是

如果你这样做

CKEDITOR.replace('mytextarea');

在表单提交时发送新值