detecting changes with ckeditor

Question

I've been googling around to find a solution but without any working solutions yet. I want to detect if the textarea has been changed. I'm using ckeditor so you can't check the textarea itself. I found something in the documentation but I couldn't get it to work for me.

Did someone ever tried to do this before and is it possible?

Answer 1

After some research and a lot of googling a found a suitable method.

var content_editor = CKEDITOR.instances['content'];

content_editor.on( 'key', function() {
    change_page = true;
});

Answer 2

I used the jquery ckeditor method.

Here is the html:

<textarea id="txtMessage" class="editor" maxlength="500"></textarea>

and here is the javascript:

try {
        var config =
            {
                height: 180,
                width: 515,
                linkShowAdvancedTab: false,
                scayt_autoStartup: true,
                enterMode: Number(2),
                toolbar_Full: [['Styles', 'Bold', 'Italic', 
                                              'Underline', 'SpellChecker', 'Scayt', 
                                              '-', 'NumberedList', 'BulletedList'],
                      ['Link', 'Unlink'], ['Undo', 'Redo', '-', 'SelectAll']]

            };

        $('textarea.editor').ckeditor(config);
        CKEDITOR.instances["txtMessage"].on("instanceReady", InstanceReadyEvent);

    }
    catch (err) {
        alert('Error loading ck editor: ' + err);
    }

    function InstanceReadyEvent() {
        this.document.on("keyup", function () {

            var yourText = CKEDITOR.instances["txtMessage"].getData();
        });
    }

Hope that helps.

Answer 3

There is a checkDirty() function that you could "poll". Otherwise look at the SCAYT plugin, I think they monitor keystrokes.

But I do not know of a "public" event that fires, check out; CKEDITOR.dom.event (DOM event handler) CKEDITOR.event (internal event handler)

Answer 4

(old post, but google bring me here)

From the official website , you have :

var editor = CKEDITOR.replace( 'editor1' );

// The "change" event is fired whenever a change is made in the editor.
editor.on( 'change', function( evt ) {
    // getData() returns CKEditor's HTML content.
    console.log( 'Total bytes: ' + evt.editor.getData().length );
});