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 the page is opened. Afterwards I type something more or delete some of that text. Is there some event that's fired I can get to to change a variable when the text is changed?

I have this for regular textareas:

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

Saw a possible solution somewhere that had this:

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

Tried it, but didn't work. And yes I know my ckeditor's textarea has "ckeditor" as its class so that's not the reason for it not to work.

So something like those examples I can use to get to some sort of textchanged event of ckeditor?

Answer 1

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 2

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

Answer 3

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 4

Simple jQuery event binding for CKEditor4

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