If content in CKEditor is changed

Question

I'm trying to detect if something is changed in a CKEditor using jquery, but can't get it to work.

 var isModified = false;

 $('textarea,input').change(function(){
      if(!isModified){
          isModified = true;
        }
 });

$(".ckeditor").document.on('keydown', function() {  isModified = true; });

window.onbeforeunload = function(){
        $(".ckeditor").ckeditorGet().updateElement();

        if(isModified){
              return "Are you sure you want to leave page?";
           }
     }; 

Do anyone know what's needed in order to make it work for CKEditor 3.6.2? It works on all other form elements.

Answer 1

There is a function called checkDirty() in the CKE api for this. That way you don't need to roll your own. Also comes with other useful functions, like resetDirty(). Try this as a test:

if ( CKEDITOR.instances.editor1.checkDirty() ) alert("Content changed");

Update 5.7.2013

See http://dev.ckeditor.com/ticket/9794 - change event is a confirmed new feature! It has also been marked for Milestone 4.2 and confirmed by tweet from CKSource! Just don't trust the due date for milestones, they tend to change.

Update 1.8.2013

CKEditor 4.2 is out and it introduced the onChange event as a feature. Apparently it's not 100% reliable for every possible change according to the docs - hopefully it's good enough to use! Release info at http://ckeditor.com/release/CKEditor-4.2

Answer 2

You can track changes within the editor by binding to the editor's key event.

Using the jQuery adapter:

$('.ckeditor').ckeditorGet().on('key', function(e) {
    var keyCode = e.data.keyCode; // if you need to track the key
    isModified = true;
});

Docs on the key event