AJAX挿入後にTinyMCEエディター/ビジュアルエディターを初期化する


11

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

$('.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});
    });
});

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

スクリーンショット

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

Uncaught TypeError:undefinedのプロパティ 'onpageload'を読み取れません

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


'onpageload'の問題の解決策はありましたか
Kvvaradha

クイックタグを使用していくつかの項目を登録する必要がある場合もあります。これをローカルでテストすることはできないため、100%確実ではありませんが、stackoverflow.com / questions / 21519322 / …から始めて、それが役立つかどうかを確認できます。
ファットカット

ねえ、またこれに出くわした。OP、これらのフィールドの1つを投稿エディターに追加する方法のスニペットを追加できますか?私はこれをローカルで再現して再現することができます。これを自分で立てる方法を提供できれば、掘り下げることができます。
ファットカット

@phatskat、ありがとう。私は実際にまったく別の方向に進んでしまいました...クライアントはこのシステムを商用販売用にパッケージ化したかったので、ACFなしのカスタムインターフェイスを使用してすべてを書き直しました。支援の申し出に感謝します!
Jack Arturo、

回答:


1

JavaScriptを含めずにエディターを機能させることができましたか?その場合は、動作するtinymceエディターを含むテンプレートを作成してから、JavaScriptを書き直してWithDataAndEvents、jQuery clone()関数の引数をtrueに設定してそのテンプレートをコピーしてください。

例えば:

$('.cloner').click(function(){
  $('.container').append($('.template').clone(true).removeClass('hidden'));
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.