web-dev-qa-db-ja.com

TinyMCEを（PHP/wp_editorではなく）JS経由でインスタンス化する

ページがロードされたら、TinyMCEエディタをどのように作成しますか？

AJAXリクエストにwp_editor呼び出しを入れて表示すると、次のようになります。

enter image description here

ビジュアルタブとテキストタブは、機能しておらず、ツールバーでも、アクティブなTinyMCEインスタンスでもなく、HTMLマークアップだけです。 TinyMCEのJSコンポーネントをインスタンス化する必要がありますが、どうすればいいですか？

また、AJAX response PHPで_WP_Editors::editor_js();を呼び出してみたところ、console.logを使用してコンソールで応答を確認でき、そこにJSスクリプトが表示されますが、 DOMに挿入されず、実行されることもありません。

javascripttinymce
5
Tom J Nowell

TinyMCE 4用に更新されました

私はいくらか進歩しました

隠されたdivに最初のページロードでwp_editorをロードして、それからエディタマークアップをつかむためにAJAX呼び出しをしてください。

PHPにいる間は、wp_editor呼び出しによって作成されたエディターのIDを取得する必要があります。残念ながら、_WP_Editorsクラスの変数は非公開ですが、フィルタを使用することでこれを回避できます。これを行うには、まず出力バッファ内のeditor_jsフックを呼び出します。このJSはAJAXを介して返送されて挿入された場合は機能しませんが、必要な設定を生成し、必要なJSを出力しようとします。

この呼び出しの最後に、_WP_Editorsクラスがフィルターを介してmcesettings配列をページングします。これを使用して、コピーを作成し、エディターIDを次のものから取得できます。

add_action( 'after_wp_tiny_mce', array( $this, 'steal_away_mcesettings' ) );

function steal_away_mcesettings( $mcesettings ) {
    $this->mcesettings = $mcesettings;
}

そのため、このフィルタを追加した後は、editor_js関数を呼び出します。

ob_start();
_WP_Editors::editor_js();
ob_end_clean();

これで、$ mcesettingsコピーを使ってIDのリストを埋めることができます。

$ids = array();

foreach ( $this->mcesettings as $editor_id => $init ) {
    $ids[] = $editor_id;
}

Ids配列はhtmlと共にAJAXレスポンスで送り返すことができます。

ブラウザに入ったら、HTMLをページに挿入してから、editor_idsを使用して、TinyMCEインスタンスを次のようにインスタンス化できます。

function tinyMCE_bulk_init( editor_ids ) {
    var init, ed, qt, first_init, DOM, el, i;

    if ( typeof(tinymce) == 'object' ) {

        var editor;
        for ( e in tinyMCEPreInit.mceInit ) {
            editor = e;
            break;
        }
        for ( i in editor_ids ) {
            var ed_id = editor_ids[i];
            tinyMCEPreInit.mceInit[ed_id] = tinyMCEPreInit.mceInit[editor];
            tinyMCEPreInit.mceInit[ed_id]['elements'] = ed_id;
            tinyMCEPreInit.mceInit[ed_id]['body_class'] = ed_id;
            tinyMCEPreInit.mceInit[ed_id]['succesful'] =  false;
        }

        for ( ed in tinyMCEPreInit.mceInit ) {
            // check if there is an adjacent span with the class mceEditor
            if ( ! jQuery('#'+ed).next().hasClass('mceEditor') ) {
                init = tinyMCEPreInit.mceInit[ed];
                try {
                    tinymce.init(init);
                    tinymce.execCommand( 'mceAddEditor', true, ed_id );
                } catch(e){
                    console.log('failed');
                    console.log( e );
                }
            }
        }

    }
}

WordPressスタイルに合わせて必要なTinyMCE設定を自分で生成することはできないため、代わりに、最初のページの読み込みで作成したインスタンスからそれらを盗み取り、コピーを作成します。その後、正しい要素IDを使用するようにコピーを変更し、通常どおり続行して、要素にインスタンスがないことを確認します。

enter image description here

問題

  • プレーンテキストとビジュアルコンテンツのタブは機能しません
  • プレーンテキストビューにクイックタグはありません
  • 初期のTinyMCEインスタンスの追加の重み
  • メディアアップローダボタンなし
  • AJAXリクエストに2つ以上のTinyMCEインスタンスを追加すると、1つの動作中のインスタンスが生成され、他のインスタンスは壊れます。なぜそうなっているのかよくわかりませんが、2つのAJAXそれぞれに1つのインスタンスを要求すると、2つの作業インスタンスが得られます。
  • TinyMCEPreInit構造を変更しないようにJSを変更し、そのコピーをイニシャライザに直接渡して、プロセス内のDOMトラバーサルを削除することができます。
3
Tom J Nowell