Monitor CKEditor instance for changes

The method you are looking for is checkDirty(). I have been trying to get something like this working for the past few days, but I hadn't thought of using JQuery. I'll try your method. Let me know if you get it working.

Actually, I just took another look at the code you posted and you may also want the function resetDirty().

Did this problem ever get resolved? Is there a function for CheckDirty() or isDirty() in CKEditor 3? Or do we have to hard-code this using listeners -- ad if so, can someone please provide an example (I'm still a novice at this)

Thanks

Reg

Reg, you even made up a proper name for the function and did not bother to actually look it up?

See checkDirty() in CKEditor API documentation.

Hi Anna,

I spent quite a bit of time searching actually, and couldn't find it. All that came up in the results were references to FCKEditor 2. Don't know what I was doing wrong. Thanks for setting me on the right path.

If I understand correctly, this function will return whether a change has been made whenever you ask for it. What I am looking for is something that will call a function whenever a change is made (or when CKEditor loses focus and a change has been made) so that I can show the Save button on the page.

On other, non-CKEditor, fields I can bind an onchange event to turn on the Save button. Is it possible to do something like that with a CKEditor control?

Thanks

Reg

Hi Again,

I think what I need to use is the "blur" event, but I am having trouble getting the syntax correct. Anyone suggest the correct way of doing this please?

CKEDITOR.config.width = '65%';
CKEDITOR.replace( 'public_bio', { toolbar : 'TextFull', height : 300 } );
CKEDITOR.replace( 'biography', { toolbar : 'TextFull', height : 300 } );
CKEDITOR.replace( 'person_promo', { toolbar : 'TextFull', height : 300 } );
CKEDITOR.on( 'blur', function( e )
{
alert( 'The editor named ' + e.editor.name + ' lost the focus' );
});

I have tried other variations (using the name of the dom element being repalced alone or with the CKEDitor keyword) and nothing seems to work. So I am lost. Any help would be greatly appreciated.

Thanks
Reg

As an fyi for anyone that wants to check if the ckeditor instance are dirty here is something I use to let them know there is dirty data before leaving the page

var checkChangesEnabled = true;
window.onbeforeunload = function (e) {
    var e = e || window.event;
    var isDirty = false;
    for (var i in CKEDITOR.instances) {
        if(CKEDITOR.instances[i].checkDirty())
        {
            isDirty = true;
        }
    }

    if (isDirty == true && checkChangesEnabled) {
        e.returnValue = 'Your document has UNSAVED CHANGES  If you continue those changes will be LOST.';
        disableCheck();
    }
} 

function disableCheck() {
    checkChangesEnabled = false;
    setTimeout("enableCheck()", "100");
}

function enableCheck() {
    checkChangesEnabled = true;
}

Thanks fetters5, I appreciate all responses (they seem to be in short supply on this board).

What I have worked out is the following:

CKEDITOR.replace( 'public_bio', { toolbar : 'TextFull', height : 300 } );
CKEDITOR.replace( 'biography', { toolbar : 'TextFull', height : 300 } );
CKEDITOR.replace( 'person_promo', { toolbar : 'TextFull', height : 300 } );
CKEDITOR.instances.public_bio.on( 'blur', function( e )
{
var changesmade = e.editor.checkDirty() ;
if (changesmade) { TrackDirty() };
});
CKEDITOR.instances.biography.on( 'blur', function( e )
{
var changesmade = e.editor.checkDirty() ;
if (changesmade) { TrackDirty() };
});
CKEDITOR.instances.person_promo.on( 'blur', function( e )
{
var changesmade = e.editor.checkDirty() ;
if (changesmade) { TrackDirty() };
});

It seems to work; when I leave one of the CKEditor instances and a change has been made to that control, the save button is displayed (that's what happens in the TrackDirty function).

My question is, is this the best way of doing it or have I produced a kludge?

Thanks,
Reg

Yes, your solution is correct.

Thank you, Anna

Reg

Here's a full plugin that fires a "change" event whenever the content of an instance changes: http://alfonsoml.blogspot.com/2011/03/o ... ditor.html