Question

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

所有具有“wysiwyg”类的textareas都会转换为CKEditors但不知何故{@ 1}}事件永远不会被检测到。我做了一些谷歌搜索，但关键字组合似乎只带来无关的结果（我的谷歌很糟糕）。

感谢您的帮助:)

编辑：

$('.wysiwyg').change()

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

此外，如果我只用for (var i in CKEDITOR.instances) { CKEDITOR.instances[i].on('click', function() {alert('test 1 2 3')}); }替换事件附件，它会提醒我的textarea的名称，所以我知道我不是试图将click事件附加到任何地方：）

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

我没有设法改变工作但是onblur似乎工作可能足以满足您的需求

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

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

Answer 4

我明白了！

首先，我在我的网站上编辑了ckeditor类的textareas，我让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 - 是您的textarea字段的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

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

等

Answer 9

对于事件更改，请在更新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 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

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

CKEDITOR.instances [xxx] .on（'change'，function（）{alert（'value changed !!'）}）;

这适用于CKEditor 4+，并捕获所有更改事件，包括撤消和重做，渲染Alfonso的js对新用户来说是不必要的。

Answer 13

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

当我使用CKeditor版本3.6时，不知道'变更'事件，但'模糊'事件对我来说非常适合

Answer 14

对于以后的Google员工，我注意到如果您使用此

创建CKEditor

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

它有效但在表单提交时不会更新mytextarea值，因此它会发送旧值

但

如果你喜欢这个

CKEDITOR.replace('mytextarea');

在表单上提交它发送新值

使用Jquery从CKEditor检测onChange事件

14 个答案: