How to listen to basic events in CKEditor?

Question

I can't figure out how to listen to focus, click, onKeyUp and other basic dom events in ckeditor. In the events summary there is only a few events regarding the lifecycle of ckeditor. And the "textArea" of ckeditor is an iframe, and it's html itself, so it is not clear on what dom node to listen.

Answer 1

It's not a big deal, just do the following, works for focus, blur, click etc.

var ckeditor = CKEDITOR.instances['textArea_id'];
ckeditor.on('focus', fnHandler, context, data, priority);

or a jQuery example :

$(document).ready(function () {
    $('#YOUR_TEXTAREA_ID').ckeditor(ckeditor_config);

    CKEDITOR.instances.YOUR_TEXTAREA_ID.on('blur', fnHandler);
});

I don't know when this support appeared, but it definitely works for 3.5.x

Answer 2

CKEditor actually has built-in event handling in the object. See this article for an explanation: http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html

So, to catch a modification in a CKEditor instance you could do this:

CKEDITOR.on('currentInstance', function(){modified = true;});

Also, it appears that version 3 has an event processor built into it that's more straightforward: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.file.html#eventProcessors

CK is a bit convoluted and documentation has holes, but based on its ability to gracefully handle Word generated HTML it gets my vote as the best option out there.