ckeditor 内容的事件已更改

Question

如果可能，我们如何处理ckeditor的内容被更改的事件？例如，当页面打开时，有一些文本已经插入到 ckeditor 的内容中，也就是 textarea 中。之后，我输入更多内容或删除部分文本。是否有一些事件被触发，我可以在文本更改时更改变量？

我有这个用于常规文本区域：

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

在某个地方看到了一个可能的解决方案：

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

试过了，没用。是的，我知道我的 ckeditor 的文本区域有 "ckeditor" 作为它的 class，所以这不是它不工作的原因。

所以我可以使用类似于那些示例的东西来获取 ckeditor 的某种文本更改事件？

Answer 1

是的，有非常方便的 change 甚至您可以收听。此处的文档：http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

像这样使用它（将 editor1 更改为您的编辑器实例）：

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

Answer 2

它对我有很大帮助，用于 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>

Answer 3

如果您在一页中有很多 ckeditor（版本 4），您可以使用此代码：

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

Answer 4

CKEditor4

的简单jQuery事件绑定

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

Answer 5

希望这可以帮助像我一样遇到此问题的其他人post。如果您使用的是 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);
});

ckeditor 内容的事件已更改

Event for ckeditor content changed

jquery

ckeditor