Detect focus of CKEditor

Question

trying to fix the issue where on an IOS device the keyboard disrupts fixed elements.

When clicking on a CKEditor text area, my aim is to set the style of that fixed element back to fixed.

Not sure how to detect the CKEditor being focused however.

Nothing I have tried has worked, here is the basic though:

http://jsfiddle.net/B4yGJ/180/

CKEDITOR.replace('editor1');

$('#editor1').focus(function() {
  alert('Focused');
});

Answer 1

CKEditor has a custom focus event, that will be useful to you. See the docs here: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-focus

You could use it like this for example:

CKEDITOR.on('instanceReady', function(evt) {
    var editor = evt.editor;
    console.log('The editor named ' + editor.name + ' is now ready');

    editor.on('focus', function(e) {
        console.log('The editor named ' + e.editor.name + ' is now focused');
    });
});

CKEDITOR.replace('editor1');

JSFiddle at http://jsfiddle.net/B4yGJ/181/

Answer 2

The above solution didn't work for my case

Here is how I resolved after digging into the CKEditor documentation

if(CKEDITOR.instances['editor1'].focusManager.hasFocus) {
    alert('is focused');
}

Hope this helps someone with a similar issue.