24

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?

1

5 Answers 5

49

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");
});
7
  • 2
    That probably works, but the method only gets called when the page loads (at which moment the ckeditor isn't instantiated yet) and then doesn't get called anymore, is that supposed to happen? Note that I'm replacing the textarea for ckeditor by simply setting the textarea's class="ckeditor" Jan 22, 2015 at 15:03
  • 1
    Ok that's solved, just needed to add CKEDITOR.replace( 'editor1' ); right before the CKEDITOR.instances.editor1.on.... so that it'd be already instantiated. Works fine afterwards Jan 22, 2015 at 15:24
  • 12
    Justa a remark: change event is fired from undo plugin, so you need to have undo plugin in order to use change event. Jan 23, 2015 at 10:23
  • Tried a bunch of implementations but only this one worked (version 4.5) Oct 21, 2015 at 20:29
  • @MarekLewandowski thanks for this hint..didn't even know I forgot the undo plugin..this note shoul be added to docs
    – Can Rau
    Apr 16, 2016 at 4:29
12

It helps me a 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>
1
  • This worked for me. Or even shorter: CKEDITOR.replace('TextArea1', {}).on('change', function(){...}); Feb 14 at 0:42
11

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

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());
 });
 });
1
  • Great, that's what I needed
    – Dalmaz
    Sep 23, 2021 at 10:41
0

Simple jQuery event binding for CKEditor4

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.