我如何使用CKEditor的focusManager类？

Question

我目前正在编写一个js脚本，该脚本会更改一些样式，以便在使用触摸设备时隐藏固定的页脚并完全定位页眉。
我已经能够使用普通的文本输入字段和textareas成功实现它，但是由于CKEditor不能在DOM中将其解析为文本区域，因此我不得不使用它的focusManager类来在用户聚焦时触发更改在我的网站上。
问题是我之前从未使用过CKEditor的API，并且在进行了一些研究后使用它的focusManager类遇到了一些问题。

以下是我当前的脚本。
它适用于文本区域和文本输入，但不适用于CKEditor。
据我了解，您看到的是“ cke_1”，它是编辑器的实例名称，但无法正常工作。
另外，我在整个站点中都有多个CKEditor实例，它需要在所有实例上工作。
任何帮助将不胜感激。
谢谢！

var focusManager = new CKEDITOR.focusManager(cke_1); 
var editor = CKEDITOR.instances.cke_1;

$(document)
.on("focus", "input", function(e) {
    $body.addClass('fix');
    $('footer').hide();
})
.on("blur", "input", function(e) {
    $body.removeClass('fix');
    $('footer').show();
});

$(document).on("focus", "textarea", function(e){
    $body.addClass('fix');
    $('footer').hide();
})
.on("blur", "textarea", function(e){
    $body.removeClass('fix');
    $('footer').show();
});

$(document).on("focus", editor.focusManager, function(e){
    $body.addClass('fix');
    $('footer').hide();
})
.on("blur", editor.focusManager, function(e){
    $body.removeClass('fix');
    $('footer').show();
});

Answer 1

您根本不需要使用focusManager类。 只需聆听editor#focus和editor#blur （ JSFiddle ）：

// Set focus and blur listeners for all editors to be created.
CKEDITOR.on( 'instanceReady', function( evt ) {
    var editor = evt.editor,
        body = CKEDITOR.document.getBody();

    editor.on( 'focus', function() {
        // Use jQuery if you want.
        body.addClass( 'fix' );
    } );

    editor.on( 'blur', function() {
        // Use jQuery if you want.
        body.removeClass( 'fix' );
    } );    
} );

CKEDITOR.replace( 'editor', {
    plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar',
    on: {
        // Focus and blur listeners can be set per-instance,
        // if needed.
        // focus: function() {},
        // blur: function() {}
    }
} );

Answer 2

我工作了。 由于我有ckeditor的多个实例，因此我编写了一个函数，该函数在创建实例且用户位于移动设备上时被调用。 这是我的方法：

function renderMobile(){

console.log("Mobile device detected");

// Set focus and blur listeners for all editors to be created.
CKEDITOR.on( 'instanceReady', function() {

    var editor;
    for(var i in CKEDITOR.instances) {
        editor = CKEDITOR.instances[i];
    }
    var $body = CKEDITOR.document.getBody();

    editor.on('focus', function() {
        $body.addClass( 'fix' );
    });

    editor.on('blur', function() {
        $body.removeClass( 'fix' );
    });
});
}