Event for ckeditor content changed

Question

If possible, how can we to the event of ckeditor\'s content being changed? For instance, there\'s some text already inserted into the ckeditor\'s content aka textarea when t

Answer 1

Hope this might help someone else who comes across this post like me.. If you are using CKEditor5, could try this:

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

Answer 2

It is help me lot, for onchange of CKEDITOR.

<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

If you have a lot of ckeditor (version 4) in one page you could use this code:

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

Answer 4

Simple jQuery event binding for CKEditor4

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

Answer 5

Yes, there is the very handy change even that you can listen to. Documentation here: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

Use it for example like so (change editor1 to your editor instance):

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