web-dev-qa-db-ja.com

TinyMCEエディタ/ビジュアルエディタを初期化した後 AJAX インサート

カスタムオプションページに「リピーター」スタイルのフィールドグループがあります。非表示状態のアクティブなビジュアルエディタがあり、ユーザーが[新規追加]をクリックすると行全体が複製されます。その後、クローンを作成した行でビジュアルエディタを初期化する必要があります。私のコード:

$('.repeater-add-new').click(function(event) {
    event.preventDefault();
    var target = $(this).data('repeater');
    $( '#' + target).find('.repeater-row:not(.clone) .repeater-content.in').collapse();
    var newRow = $( '#' + target + ' .repeater-row.clone' ).clone().appendTo( '#' + target + ' .repeater-row-wrapper' ).removeClass('clone');
    rebuildIndex(target);

    // Initialize editors if needed
    newRow.find('.wp-editor-wrap').each(function(index, el) {
        var ed_id = $(this).find('textarea').attr('id');

        tinymce.init(tinyMCEPreInit.mceInit[ed_id]);
        tinymce.execCommand('mceAddEditor', false, ed_id); 
        quicktags({id : ed_id});
    });
});

インタフェースのスクリーンショット:

Screenshot 

ページが読み込まれると、コンソールエラーが発生します。

不明なTypeError:未定義のプロパティ 'onpageload'を読み込めません

そしてもちろん、エディタは動作しません。ページを保存した後はもちろん機能しますが、行が追加されたときにも機能する必要があります。

11
Jack Arturo

あなたのJavaScriptを含めずにエディタを動かすことができましたか?もしそうならテンプレートを作成することを試してみてください。そして、実際のTinymceエディタを含み、そしてjQuery clone() functionのtrueに設定されたWithDataAndEvents引数を使用してそのテンプレートをコピーするためにあなたのjavascriptを書き直してください。

例えば:

$('.cloner').click(function(){
  $('.container').append($('.template').clone(true).removeClass('hidden'));
});
1
Fleuv