ckeditor内容的事件已更改

Question

如果可能的话,我们怎样才能改变ckeditor的内容？例如,当打开页面时,已经将一些文本插入到ckeditor的内容aka textarea中.之后我输入更多内容或删除部分文字.是否有一些事件被解雇了我可以在更改文本时更改变量？

我有这个常规textareas:

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

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

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

尝试过,但没有奏效.是的,我知道我的ckeditor的textarea有"ckeditor"作为它的类,所以这不是它不工作的原因.

那么像我可以用来获得某种ckeditor的textchanged事件的例子呢？

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

希望这可以帮助像我一样遇到这篇文章的其他人..如果您使用的是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);
});