Detecting onChange events from a CKEditor using Jquery

Question

I'm working with the CKEditor and jQuery and I'd like to toggle a flag to true whenever a user changes the value of a field. One of those fields is a CKEditor instance.

All the textareas that have the "wysiwyg" class get converted to CKEditors but somehow the $('.wysiwyg').change() event never gets detected. I did some googling but the keyword combination seems to bring up nothing but irrelevant results (my google-fu sucks).

Thanks for any help :)

Edit:

for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].on('click', function() {alert('test 1 2 3')});
    }

I tried the code above and it doesn't work. It doesn't give me an error meaning that it finds the CKEditor objects but for some reason the listener isn't attached to it?

Also, if I replace the event attachment with just alert(CKEDITOR.instances[i].name); it'll alert the name of my textarea so I know I'm not trying to attach the click event to nothing :)

Answer 1

You can get a plugin (and an explanation about what things are detected as changes) in this post: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html so you can do things like

for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].on('change', function() {alert('test 1 2 3')});
    }

Answer 2

There is now a change event: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

The following is working for me using version 4.4.3. You need to handle when the Source and HTML changes.

// Initialize the rich text editor.
var bodyEditor = CKEDITOR.replace('emailTemplate_Body',
{
    readOnly: false
});

// Handle when the Source changes.
bodyEditor.on('mode', function () {
    if (this.mode == 'source') {
        var editable = bodyEditor.editable();
        editable.attachListener(editable, 'input', function () {
            alert('source changed');
        });
    }
});

// Handle when the HTML changes.
bodyEditor.on('change', function () {
    alert('change fired');
});

Answer 3

I haven't managed to get onchange working however onblur seem to work which may be sufficient for your needs

CKEDITOR.instances['name'].on('blur', function() {alert(1);});

Answer 4

I got it!

First I had the editors on my web created as textareas with the class ckeditor, and I let the ckeditor.js make them richTextEditors. Then I tried distinct solutions from the other answers, but couldn't make them work.
Then I changed the class name (to CKeditor), so I have to initialize the editors in my code. I tried this and it works:

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>

$('.CKeditor').ckeditor(function(){
     this.on('blur', function({if(this.checkDirty())alert('text changed!');});
});

So when a editor loses the focus it checks if it's dirty, and if it is then it fires the changed function (the alert in this example).

Later I've tried again with the onchanges plugin, in this way:

$('.CKeditor').ckeditor();
for (var i in CKEDITOR.instances) {
    CKEDITOR.instances[i].on('change', function() {alert('text changed!');});
}

Now it works with the plugin too (thanks @Alfonso). But I think that the plugin makes the changes event fire too much, I prefer the first solution where changes are only evaluated on blur.

Hope this helps! and thanks to all for your help.

Answer 5

The CKEditor has function a 'checkDirty()'. The simplest way to check if the CKEditor value has been changed is to add this piece of JS in your Code.

CKEDITOR.instances['emailBody'].on('blur', function(e) {
    if (e.editor.checkDirty()) {
        var emailValChanged=true; // The action that you would like to call onChange
    }
});

Note: emailBody - is the id of your textarea field

Answer 6

Best I can do, basically gives you an indication as to if the content of the editor has changed from the original state.

var editor = $('#ckeditor').ckeditorGet();

editor.on("instanceReady", function(){                    
     this.document.on("keyup", function(){
     console.log(editor.checkDirty());
   });
});

Answer 7

I haven't come up with a solution but the following link talks more about the events available witht he CKEditor:

http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html

This is not the perfect solution I was looking for but I'm using the following to flag that my content has been modified:

CKEDITOR.on('currentInstance', function(){modified = true;});

This doesn't actually mean the content has been modified but that the user has focused or blurred from the editor (which is better than nothing).

Answer 8

editor = CKEDITOR.appendTo('container', {resize_enabled: false}); 
editor.on('key', function () { setTimeout(setHtmlData,10); });

etc

Answer 9

For event change download the plugin onchange http://ckeditor.com/addon/onchange and do this

var options_cke ={
         toolbar :
        [
            { name: 'basicstyles', items :['Bold','Italic','Underline','Image', 'TextColor'] },
            { name: 'paragraph', items : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','BGColor' ] },
                        { name: 'font', items : [ 'Font','Styles']}

        ],
                on :
                {
                    change :function( ev )
                    {
                        //ev.editor.focus();
                        console.log(ev);
                    }
                }

     };
 var editor=$('yourCkeEditorID').ckeditor(options_cke);

Answer 10

from what I can see on the CKEditor documentation site CKEditor comes with built event handling. This means that you should use that instead of JQuery to listen to the onChange event. This is also mainly because when editors like CKEditors create their "fancy" uis you will end up listening to the wrong element for a change. I believe if you can get the reference of the CKEditor javascript object you should be able to write something like this:

ckRefObj.on('onChange', function() { /* do your stuff here */ });

I hope this helps.

Answer 11

This code will alert user on clicking any sidebar link

$("#side-menu a").click(function(e){
  if(checkUnsaved()){
    if (confirm("You have unsaved changes.Do you want to save?")) {
      e.preventDefault();          
    }
    // or ur custom alert
  }
});

function checkUnsaved() {
    if(CKEDITOR)
        return CKEDITOR.instances['edit-body'].checkDirty(); // edit-body is the name of textarea in my case.
    else
        return false;
}

Answer 12

I apparently cant simply add a comment because I'm new to the site, but Garry's answer is correct and I've independently verified it so I wanted to add this.

CKEDITOR.instances[xxx].on('change', function() {alert('value changed!!')});

This works for CKEditor 4+, and captures all change events, including undo and redo, rendering Alfonso's js work unnecessary for new users.

Answer 13

$(document).ready(function () {        
    CKEDITOR.on('instanceReady', function (evt) {                    
        evt.editor.on('blur', function () {
            compare_ckeditor('txtLongDesc');
        });                    
    });
});

Don't know about the 'change' event but 'blur' event works perfectly for me when I am using CKeditor version 3.6

Answer 14

For later Googlers, I noticed that if you create CKEditor using this

$("#mytextarea").ckeditor();

it works but on form submit doesn't update mytextarea value so it sends old value

but

if you do like this

CKEDITOR.replace('mytextarea');

on form submit it sends new value