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.

Possible dupe: https://stackoverflow.com/questions/5143516/detecting-onchange-events-from-a-ckeditor-using-jquery — Timmah, Nov 17 '21 at 00:21

Joel Peltonen · Answer 1 · 2013-08-01T14:03:50.563

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

score 3 · Accepted Answer · answered Mar 12 '12 at 19:09

3

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

answered Mar 12 '12 at 19:09

steve_c

6,235
4
32
42

7

Note: some changes to the content might not be fired with a key event, for example making something bold is just a mouse clickety clack, not a single keyboard tap. Word. – Joel Peltonen Feb 13 '13 at 08:58

score 1 · Answer 3 · answered Mar 12 '12 at 19:21

1

You can use this CKEditor plugin that fires an event whenever the content changes.

answered Mar 12 '12 at 19:21

AlfonsoML

12,634
2
46
53

for CKeditor 4.X? And about @Nenotlep update, "CKEditor 4.2 is out and it introduced the onChange event as a feature", is the same or plugin is better? – Peter Krauss Nov 21 '13 at 15:50
1

It's a different implementation. Instead of picking the existing plugin and improving on it they decided to write a very basic version using the Undo, so they are missing all the features that I described when I explained why the Undo system in CKEditor is not enough for a change event. – AlfonsoML Nov 21 '13 at 22:03
The linked to page says it does not work and won't be updated for ckEditor 4. – Nick Rice Nov 03 '14 at 07:57

score 0 · Answer 4 · edited May 23 '17 at 12:10

0

Checking with my local Drupal installation, CKEditor is not a regular HTML form element (it's not a textarea). Rather, it is a IFrame mimicking a form element. I think likely you will need to create a small CKEditor plugin shim and use that to communicate with your local scripts, see: add code for event listener for keypress in ckeditor.

edited May 23 '17 at 12:10

Community

1
1

answered Mar 12 '12 at 13:51

James Andres

1,522
14
20

If content in CKEditor is changed

4 Answers4