如何使用CKEditor的focusManager类？

Question

我目前正在写一个js脚本，当使用触摸设备时，它会改变一些样式，以便隐藏固定的页脚和绝对位置的页眉。

我已经能够用普通的文本输入字段和文本区域成功地实现它，但是由于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

我把它弄好了。因为我有多个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' );
    });
});
}

Answer 2

您根本不需要使用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() {}
    }
} );