Cum să încarci wp_editor() prin AJAX/jQuery

Pentru a face ca quicktags să apară, trebuie să le reinstanțiați în handler-ul oncomplete al cererii AJAX.

quicktags({id : 'editorcontentid'});

Handler-ul meu de succes pentru AJAX arată astfel:

success: function(data, textStatus, XMLHttpRequest){
            //adaugă editorul în DOM
            $('#container').append($(data).html());
            //inițializează quicktags
            quicktags({id : 'editorcontentid'});
            //inițializează tinymce
            tinymce.init(tinyMCEPreInit.mceInit['editorcontentid']);
        }

Am reușit să încărc editorul apelând mai întâi o funcție statică care creează editorul și îl stochează ca variabilă. Rulez metoda de creare a editorului la inițializare. Acest lucru pare să determine WordPress să încarce toate scripturile necesare.

Este important ca atunci când creați instanța editorului, să setați ca aceasta să folosească TinyMCE, astfel încât fișierul JS al TinyMCE să fie încărcat și el.

După ce m-am chinuit cu asta, am găsit soluția care funcționează, într-un callback după ce adaugi un element nou:

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

Este ciudat că nu există nicio documentație în codex.

Soluția funcțională finală:

Adăugați acțiunea în WordPress, de exemplu My_Action_Name (de asemenea, notați ID-ul textarea 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;
});

Acum, în Panoul de control, executați această funcție (observați utilizarea My_TextAreaID_22 și My_Action_Name):

function start_Ajax_request() { 
    My_New_Global_Settings =  tinyMCEPreInit.mceInit.content;       // Obține setările implicite WordPress (Nu pot confirma, dar dacă aveți nevoie să schimbați ID-ul țintă, adăugați această linie:  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();     // < ---- EXECUTĂ

Trebuie să inițializați din nou editorul după ce adăugați textarea-ul prin Ajax, am făcut astfel:

$.fn.tinymce_textareas = function(){
  tinyMCE.init({
    skin : "wp_theme"
    // alte opțiuni aici
  });
};

Apoi apelați funcția după request-ul Ajax, astfel:

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

Soluția funcțională oferită de @toscho pe github. El a realizat acest rezultat elegant și ca răspuns la o întrebare aici, consultați răspunsul său pentru mai multe detalii.

Am reușit să implementez astfel:

1. Mai întâi trebuie să apelezi wp_editor pe pagina principală, de unde inițiezi apelul AJAX. Dar trebuie să-l înfășori într-un div ascuns:

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

ID-ul trebuie să fie generat aleatoriu și unic. Setările trebuie să fie identice cu cele din editorul AJAX.

2. Apoi, în răspunsul AJAX trebuie să apelezi:

wp_editor( '', '[setează ID-ul după necesitate]', array(aceleași setări ca pe pagina principală) ); _WP_Editors::editor_js(); //acest cod inițializează editorul

Acest lucru va funcționa pe paginile de administrare.

Pentru a adăuga un nou editor wp într-un container prin JS AJAX:

1) Creați o funcție wp_ajax în functions.php care să returneze editorul wp

2) Creați un script jQuery pentru a solicita un nou editor de text și a-l adăuga într-un container, în acest caz, la apăsarea unui buton

Fișier PHP

function yourprefix_get_text_editor() {
    $content = ""; // Gol pentru că este un editor nou
    $editor_id = $_POST["text_editor_id"]; // ID generat aleatoriu din apelul AJAX JS
    $textarea_name = $_POST["textarea_name"]; // Nume din fișierul JS
    $settings = array(
        'textarea_name' => $textarea_name
    );
    wp_editor($content, $editor_id, $settings);
    wp_die(); // Obligatoriu wp_die
}
add_action('wp_ajax_yourprefix_get_text_editor', 'yourprefix_get_text_editor');

Script JS (jsfile.js)

jQuery(function($) {
$("someelement").click(function(e) { // Pentru a adăuga un editor la click pe buton
    var target = themeajax.ajax_url; // Trimis prin wp_localize_script
    var editor_id = "editorid"; // Generați acest ID dinamic
    var textarea_name = "textareaname" // Generați acest nume după necesități
    var data = {
        'action': 'yourprefix_get_text_editor',
        'text_editor_id': editor_id,
        'textarea_name': textarea_name
    }
    $.post(target, data, function(response) {
        container.append(response); // Folosiți logica pentru a obține containerul unde doriți să adăugați editorul
        tinymce.execCommand('mceAddEditor', false, editor_id);
        quicktags({id : editor_id});
    });
}
});

Apel pentru încărcarea scripturilor:

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');

Folosește acest cod, sper că te va ajuta:

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

Mai multe detalii pot fi găsite aici.