ckeditor4使用动态创建的编辑器insantces访问focusmanager

ckeditor 4 accessing focusmanager with dynamically created editor insantces

本文关键字：编辑器 insantces 访问 focusmanager 创建 动态 ckeditor4      更新时间：2023-09-26

我目前有一个编辑器，当它加载时，它将始终在页面上，该页面具有通过单击添加按钮添加多个编辑器的功能。

我的代码只适用于与页面一起加载的第一个编辑器，即使是在页面加载后动态创建的，我如何调整它以适用于页面上的所有编辑器？（动态创建的编辑器）

$(document).ready(function(){
    $.each(CKEDITOR.instances, function(instance){
        var editor = CKEDITOR.instances[instance];
        if (editor) {
            editor.on( 'focus', function( e ) {
                $('.hint').show();
            });
            editor.on( 'blur', function( e ) {
                $('.hint').hide();
            });
        }
    });
});

eidt 1-完整代码减去html

$(document).ready(function(){
    $('textarea').each(function(i) {
        var editorId = $(this).attr('id');
        if(editorId != 'master'){
            if( $(this).hasClass('main') ){
                ckeditor_simple_toolbar(editorId);
            }
            if( $(this).hasClass('extras') ){
                ckeditor_advanced_toolbar(editorId);
            }
        }
    });
    $.each(CKEDITOR.instances, function(instance){
        var editor = CKEDITOR.instances[instance];
        if (editor) {
            editor.on( 'focus', function( e ) {
                $('.hint').show();
            });
            editor.on( 'blur', function( e ) {
                $('.hint').hide();
            });
        }
    });
    $('.add_extra').live('click',function(){
        ckeditor_advanced_toolbar(this.id);
    });
});

function ckeditor_simple_toolbar(textA_id){
    CKEDITOR.replace(textA_id,{
        tabSpaces           : 4
    });
}
function ckeditor_advanced_toolbar(textA_id){
    CKEDITOR.replace(textA_id,{
        emailProtection     : 'encode',
        tabSpaces           : 4,
        extraPlugins        : 'autogrow',
        height              : 100,
        autoGrow_minHeight  : 100,
        autoGrow_maxHeight  : 400,
        removePlugins       : 'resize',
        toolbarLocation     : 'bottom',
    });
}

编辑2这是一个正在发生的事情的测试设置，焦点和模糊在动态添加的编辑器上不起作用

http://elhalawa.net/editor/index.html

刚刚添加了oninstanceReady代码，它的效果很好

CKEDITOR.replace(textA_id,{
    emailProtection     : 'encode',
    tabSpaces           : 4,
    extraPlugins        : 'autogrow',
    height              : 100,
    autoGrow_minHeight  : 100,
    autoGrow_maxHeight  : 400,
    removePlugins       : 'resize',
    toolbarLocation     : 'bottom',
}).on("instanceReady", function (e) {
    this.on("focus", function () {
    });
    this.on("blur", function () {
    });
    this.on( 'change', function() {
    });
});
相关文章：