Question

我目前有一个编辑器在加载时总是在页面上，该页面有一个功能，可以通过单击添加按钮添加多个编辑器。

我的代码只在第一个编辑器上运行，只有页面加载了，即使在页面加载后动态创建，我如何使其适应页面上的所有编辑器？（动态创建的编辑器）

$(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

Answer 1

刚刚添加了on instanceReady代码，效果很好

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() {

    });
});

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

1 个答案: