使用 Jquery 检测来自 CKEditor 的 onChange 事件

Question

我正在使用 CKEditor 和 jQuery，每当用户更改字段的值时，我想将标志切换为 true。这些字段之一是 CKEditor 实例。

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

感谢您的帮助:)

编辑：

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

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

另外，如果我用 alert(CKEDITOR.instances[i].name); 替换事件附件，它会提醒我的文本区域的名称，这样我就知道我没有尝试附加点击事件归于无事:)

Answer 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')});
    }

Answer 2

我还没有成功地让 onchange 工作，但是 onblur 似乎可以工作，这可能足以满足您的需求

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

Answer 3

现在有一个更改事件： 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');
});

Answer 4

我明白了！

首先，我使用 ckeditor 类将网站上的编辑器创建为文本区域，然后让 ckeditor.js 将它们设为 richTextEditors。然后我尝试了与其他答案不同的解决方案，但无法使它们发挥作用。
然后我更改了类名称（更改为 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）。但我认为该插件使更改事件触发过多，我更喜欢第一个解决方案，其中更改仅在模糊时进行评估。

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

Answer 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 - 是文本区域字段的 ID

Answer 6

我能做的，基本上就是告诉您编辑器的内容是否已从原始状态更改。

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

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

Answer 7

我还没有想出解决方案，但以下链接详细介绍了 CKEditor 可用的事件：

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

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

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

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

Answer 8

对于事件更改，下载插件 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);

Answer 9

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

ETC

Answer 10

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

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

我希望这会有所帮助。

Answer 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;
}

Answer 12

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

CKEDITOR.instances[xxx].on('更改', function() {alert('值更改!!')});

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

Answer 13

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

不知道“change”事件，但当我使用 CKeditor 版本 3.6 时，“blur”事件对我来说非常适合

Answer 14

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

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

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

，但

如果您在表单提交时这样做，

CKEDITOR.replace('mytextarea');

它会发送新值