In CKEditor, I know that in the "normal mode", we can detect any content change using the following code:

ckeditor.on('change',function(e){
  console.log("ckeditor on change");
});

But if I switch over to the source mode, the event does not fire.

How can I detect the on change event for source view?

In CKEditor, I know that in the "normal mode", we can detect any content change using the following code:

ckeditor.on('change',function(e){
  console.log("ckeditor on change");
});

But if I switch over to the source mode, the event does not fire.

How can I detect the on change event for source view?

• javascript
• ckeditor

• Have a look at this question: stackoverflow.com/questions/5230839/… – Mimo Commented Jun 28, 2013 at 6:05
• Thanks @Kicker for the tips, on key works for the source view as well – user7180 Commented Jun 28, 2013 at 6:21
• That first statement is wrong: Currently CKEditor doesn't fire by itself any change event at all. You must be using some plugin that takes care of it, but it only works in "normal mode" as you call it. – AlfonsoML Commented Jun 28, 2013 at 9:41

2 Answers 2

Instead of using "change" event, the "key" event does fire on the source view.

Thanks for Kicker's hint

The CKEditor 4 documentation tells that the change event won't be fired in source mode.

The example from the documentation worked for me. It binds a listener to the mode event. That's fired when the mode changes. When it changes to source, attach a listener to the editor.

editor.on('mode', function() {
    if (this.mode === 'source') {
        var editable = editor.editable();
        editable.attachListener(editable, 'input', function() {
            // Handle changes made in the source mode.
        });
    }
});