使用Jquery从CKEditor检测onChange事件

Question

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

所有具有"wysiwyg"类的textareas都会转换为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);它替换事件附件,它会提醒我的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具有功能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
    }
});

注意:emailBody- 是textarea字段的id

Answer 6

我能做的最好,基本上可以指示编辑器的内容是否已从原始状态更改.

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

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