0

現在、ロード時にページに常に表示されるエディターが 1 つあります。ページには、追加ボタンをクリックして複数のエディターを追加する機能があります。

私のコードは、ページが読み込まれた最初のエディターでのみ動作します。ページが読み込まれた後に動的に作成された場合でも、ページ上のすべてのエディターで動作するようにするにはどうすればよいですか? (動的に作成されたエディター)

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

4

1 に答える 1

1

just added the on instanceReady code and it worked great

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

    });
});
于 2013-03-14T00:08:41.487 に答える