Jquery – If content in CKEditor is changed

ckeditorjquery

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.

Best Answer

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

Related Topic