CKEditor 内容更改事件

Question

如果可能的话，我们如何处理ckeditor内容发生更改的事件？例如，在打开页面时，已经插入了一些文本到ckeditor的内容（即文本区域）。然后我添加了一些内容或删除了其中的一些文本。是否有一些事件被触发可以让我在文本发生更改时获取并改变一个变量？

对于普通的文本区域，我使用以下代码：

$("input,textarea").on("input", function () {
    booleanvar= true;
});

我在某个地方看到了一个可能的解决方案，它是这样的：

$('.ckeditor').ckeditorGet().on('key', function (e) {
    //some code
});

我试过了，但不起作用。是的，我知道我的ckeditor的文本区域的类为"ckeditor"，所以这不是它不能工作的原因。

那么有没有类似这些示例可以用来获取到ckeditor的文本更改事件呢？

- Micael Florêncio

---

可能是如何在CKEditor中监听基本事件？的重复问题。 - A. Rama

Answer 1

是的，有一个非常方便的change事件可以监听。此处有文档：http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

例如，可以像这样使用它（将editor1更改为您自己的编辑器实例）：

CKEDITOR.instances.editor1.on('change', function() { 
    console.log("TEST");
});

- Joel Peltonen

---

那可能有效，但是该方法仅在页面加载时调用（此时ckeditor尚未实例化），然后不再被调用了，这是否应该发生？ 请注意，我通过简单地设置textarea的class =“ ckeditor”来替换ckeditor的textarea。 - Micael Florêncio

好的，问题解决了，只需要在 CKEDITOR.instances.editor1.on.... 之前添加 CKEDITOR.replace( 'editor1' ); 就可以让它被实例化。之后就可以正常工作了。 - Micael Florêncio

仅仅是一个备注：change 事件是从 undo 插件中触发的，因此你需要有撤销插件才能使用 change 事件。 - Marek Lewandowski

尝试了很多实现方式，但只有这个（4.5版本）有效。 - pat capozzi

我该如何找到 ckeditor 实例？就像你说的那样，用你的 ckeditor 实例替换 editor1？ - Ahmad

Answer 2

希望这篇文章能够帮助像我一样遇到类似问题的人。如果你正在使用CKEditor5，可以尝试以下方法：

ClassicEditor.create(document.querySelector('#editor'))
.then(editor => {
    editor.model.document.on('change:data', (evt, data) => {
        console.log(editor.getData());
    });
})
.catch(error => {
    console.error('Editor initialization error.', error);
});

- Rohim Chou

---

帮帮我！！谢谢 - La Fortuna

运行完美！谢谢。 - Ammar Abdul Aziz

Answer 3

对于CKEDITOR的onchange，它对我很有帮助。

<textarea id="ckeditor_textarea " name="ckeditor_textarea ">Add Yore Data</textarea>

<script type="text/javascript">
var editor = CKEDITOR.replace( 'ckeditor_textarea ', {});
// editor is object of your CKEDITOR
editor.on('change',function(){
    console.log("test");
});
</script>

- Dave

---

这对我有用。甚至更短：CKEDITOR.replace（'TextArea1'，{}）。on（'change'，function（）{...}）; - unqualified

Answer 4

如果您在页面上有很多个 CKEditor（版本 4），您可以使用以下代码：

CKEDITOR.on('instanceCreated', function(event) {
 var editor = event.editor,
 element = editor.element;
 editor.on('change', function() {
 console.log(element.getId());
 });
 });

- Gökhan Duman

---

太好了，这就是我所需要的。 - Dalmaz

Answer 5

为CKEditor4绑定简单的jQuery事件

$.fn.onDataChange = function (func) {
    var func = func || function () { };
    CKEDITOR.instances[$(this).attr('id')].on('change', function () {
        func();
    });
}

- PseudoNinja