web-dev-qa-db-ja.com

Javascriptを使ってテキストエリアを動的に追加する場合、どうやってそれをtinyMCEエディタとしてレンダリングすることができますか(ワードプレスで)。

私は、ユーザがtinyMCEエディタをそれらに必要とするセクションを動的に追加することを可能にするプラグインを持っています。 jQueryはdivを複製し、それをコンテナに入れます。入力ボックスの1つは、次のように設定されたテキストエリアです。

<textarea name="sectionContent_1" id="sectionContent_1"></textarea>

TextareaをtinyMCEエディタに置き換える必要があります。

私は見た:

AJAXを介したwp_editor()のロード方法/ jQuery および 動的/ ajax HTMLでwordpress wp_editorを使用する

どちらも私たちにはうまくいかないようです

私はtextareaセクションを追加するために呼び出すトリガーの内側でこれを試しました:

$(this).parent().find('.sectionOptions').html(ctHolder);

var textAreaID = 'sectionContent_'+sectionID;

tinyMCE.execCommand('mceRemoveEditor', true, textAreaID);
tinyMCE.execCommand('mceAddControl', false, textAreaID);

これで、私はクローンデータ(ctHolder)を.sectionOptionsに追加してtextareaのIDを設定し、そのIDでエディタをリセットし、それからIDに制御を追加します。

3
dcp3450
tinymce.remove();
tinymce.init();

これはうまくいきます!

これはトリックでした:

var textAreaID = 'sectionContent_' + sectionID;
$(this).parent()
    .find('.sectionOptions')
    .html(ctHolder).ready(
        function() {
            tinyMCE.execCommand('mceAddEditor', false, textAreaID); 
        }
    );

Wordpress 3.9はtinyMCE 4.xを使っているので、 "mceAddControl"は "mceAddEditor"に変更されました。また、私はそれがDOMにtextareaをロードした後までjqueryがtinyMCEを実行しないようにready関数の中に呼び出しを置きました。

0
dcp3450