web-dev-qa-db-ja.com

AJAX/jQueryを介してwp_editor（）をロードする方法

私は、カスタム開発されたテーマと本当に複雑なテーマを持っています。私が持っていることの一つは、ユーザーが特定のタブのコンテンツを指定できる複数のコンテンツ領域です。私はwp_editor()関数を通してWordPressエディタの複数のインスタンスをロードします。それは完璧に機能します。 （ "Page"投稿タイプでは、これはすべて管理者側です）

しかし、私はタブを動的に追加/削除する機能を含むいくつかの改良を始めました（以前は、私はページに6つのエディタをロードしました）。ユーザーは1〜7のタブを持つことができます。

ユーザーがタブを追加するときは、エディターのインスタンスをページに追加する必要があります。しかし、何を試しても、正しくロードして表示することはできません。

これが私がこれまでに試した2つのことです。

  1. Adminブートストラップを含むphpファイルを作成してから、wp_editor()を使用してエディターをロードします。次に、そのページを呼び出して表示する必要がある領域に結果のHTMLを含めるためにjQuery $.loadを実行します。ただし、エディタの書式設定ボタンが表示されなくなるため、これは実際には機能しません（ページを直接引き上げると、エディタが完全に表示され、機能します）。
  2. 非表示のdivの内側にあるページにエディタをロードし、タブが追加されたら、jqueryを使用して適切な位置に移動します。これでエディタはそのままロードされますが、エディタボタンを使用することはできません（ボタンは表示されますが、何もしません）。カーソルをテキスト領域に置くことはできません（ただし、HTMLモードへの切り替えは不思議です）。入力とHTMLモードボタンとの対話を可能にします。

それで、問題は、誰かがAJAX呼び出しを通して編集者を追加する運がありましたか？何かアドバイス？

ajaxwp-editor
22
Aaron Wagner

クイックタグを表示するには、ajax oncompleteハンドラ内でそれらを再インスタンス化する必要があります。

quicktags({id : 'editorcontentid'});

私のajax成功ハンドラはこのように見えます。

success: function(data, textStatus, XMLHttpRequest){
            //append editor to dom
            $('#container').append($(data).html());
            //init quicktags
            quicktags({id : 'editorcontentid'});
            //init tinymce
            tinymce.init(tinyMCEPreInit.mceInit['editorcontentid']);
        }

最初にエディタを作成してそれを変数としてキャッシュする静的関数を呼び出すことで、エディタをロードすることができました。 initでエディタ作成メソッドを実行します。これはwordpressがすべての必要なスクリプトをエンキューするようにするようです。

エディタインスタンスを作成するときにtinymceを使用するように設定することが重要です。そうすることでtinymce jsファイルも享受されます。

6
Dale Sattler

それに苦労した後、あなたが新しい要素を追加した後のコールバックで、うまくいく解決策を見つけました：

tinymce.execCommand( 'mceAddEditor', true, element.id );

コーデックスの中にはドキュメンテーションが全くないというのは不思議です。

3
Goran Jakovljevic

最後に、実用的な解決策：

wordpressにアクションを追加し、My_Action_Nameと言うことができます（textarea ID My_TextAreaID_22も注意してください）。

add_action('wp_ajax_My_Action_Name', function(){
    wp_editor( $_POST['default_text'], 'My_TextAreaID_22',      $settings = array( 'tinymce'=>true, 'textarea_name'=>'name77', 'wpautop' =>false,   'media_buttons' => true ,   'teeny' => false, 'quicktags'=>true, )   );    exit;
});

さて、ダッシュボードで、この関数を実行します（My_TextAreaID_22およびMy_Action_Nameの使用に注意してください）：

function start_Ajax_request() { 
    My_New_Global_Settings =  tinyMCEPreInit.mceInit.content;       // Get default Wordpress SETTINGS  ( I cant confirm, but if you will need to change target ID, then add this line:  My_New_Global_Settings.selector = "My_TextAreaID_22";   )
    jQuery.post(ajaxurl,
        { action: "My_Action_Name",     default_text: "Hello World"}, 
        function(response,status){ 
            tinymce.init(My_New_Global_Settings); 
            tinyMCE.execCommand('mceAddEditor', false, "My_TextAreaID_22"); 
            quicktags({id : "My_TextAreaID_22"});
            // tinyMCE.execCommand( 'mceAddEditor', true, element.id );
        }
    );

}   
start_Ajax_request();     // < ---- EXECUTE
2
T.Todua

あなたがあなたのajax textareaを追加したら、あなたは再びエディタinitを呼ぶ必要があります、私はそれをこのようにしました：

$.fn.tinymce_textareas = function(){
  tinyMCE.init({
    skin : "wp_theme"
    // other options here
  });
};

それから、このようにあなたのajaxの後にあなたの関数を呼び出してください：

$('#my_new_textarea_container').html(response).tinymce_textareas();
2
shahar

@toschoから github に使える解決法。彼はここでの質問に対してもこのNiceの結果を構築しています。詳細については 彼の答え を参照してください。

1
bueltge

これは管理ページで機能します。

JS AJAXによって新しいwpエディタをコンテナに追加するには：

1）functions.phpにwp_ajax関数を作成してwp_editorを返す

2）ボタンを押すと、新しいテキストエディタを要求してコンテナに追加するjQueryスクリプトを作成します。

PHPファイル

function yourprefix_get_text_editor() {
    $content = ""; // Empty because is a new editor
    $editor_id = $_POST["text_editor_id"]; // Random ID from AJAX JS call
    $textarea_name = $_POST["textarea_name"]; // Name from JS file
    $settings = array(
        'textarea_name' => $textarea_name
    );
    wp_editor($content, $editor_id, $settings);
    wp_die(); // Mandatory wp_die
}
add_action('wp_ajax_yourprefix_get_text_editor', 'yourprefix_get_text_editor');

JSスクリプト（jsfile.js）

jQuery(function($) {
$("someelement").click(function(e) { // To Add an Editor from a button click
    var target = themeajax.ajax_url; // Passed from wp_localize_script
    var editor_id = "editorid"; // Generate this dynamically
    var textarea_name = "textareaname" // Generate this as you need
    var data = {
        'action': 'yourprefix_get_text_editor',
        'text_editor_id': editor_id,
        'textarea_name': textarea_name
    }
    $.post(target, data, function(response) {
        container.append(response); // Use your logic to get the container where you want to append the editor
        tinymce.execCommand('mceAddEditor', false, editor_id);
        quicktags({id : editor_id});
    });
}
});

エンキュースクリプトが呼び出す：

function yourprefix_admin_scripts($hook) {
    wp_enqueue_script('your-slug', get_stylesheet_directory_uri() . '/path/to/jsfile.js', array('jquery'), null, true);
    wp_localize_script('your-slug', 'themeajax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('admin_enqueue_scripts', 'yourprefix_admin_scripts');
0
Isaac Levi Felix Salinas

私はこのようにしてそれを管理しました：

  1. 最初にメインページでwp_editorを呼び出す必要があります。そこからあなたはajaxを呼び出します。しかし、あなたはそれを隠されたdivでラップしなければなりません：

    <div style="display:none">
    <?php
    wp_editor( '', 'unique_id', array(
        'media_buttons' => false,
        'textarea_rows' => 10,
        'teeny' => true,
    ) );
    ?>
    </div>

Idはランダムでユニークでなければなりません。設定はajaxエディタの設定と同じでなければなりません。

  1. 次に、これをajaxレスポンスで呼び出す必要があります。

wp_editor( '', '[set id as you need]', array(the same settings as in the main page) ); _WP_Editors::editor_js(); //this print editor init code

0
Tim Matz

このコードを使ってください。

wp_editor( '', 'custom_editor_id' );
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

より多くの詳細は見つけることができます ここ 。

0
Dileep Kumar Awasthi