Come caricare wp_editor() attraverso AJAX/jQuery

Per far apparire i quicktags, è necessario reinizializzarli all'interno del gestore oncomplete dell'ajax.

quicktags({id : 'editorcontentid'});

Il mio gestore di successo ajax è così:

success: function(data, textStatus, XMLHttpRequest){
            //aggiunge l'editor al DOM
            $('#container').append($(data).html());
            //inizializza i quicktags
            quicktags({id : 'editorcontentid'});
            //inizializza tinymce
            tinymce.init(tinyMCEPreInit.mceInit['editorcontentid']);
        }

Sono riuscito a far caricare l'editor chiamando prima una funzione statica che crea l'editor e lo memorizza come variabile. Eseguo il metodo di creazione dell'editor all'inizializzazione. Questo sembra far sì che WordPress accodare tutti gli script necessari.

È importante che quando crei la tua istanza dell'editor, la configuri per usare tinymce, in questo modo anche il file js di tinymce verrà accodato.

Dopo aver lottato con il problema, ho trovato la soluzione funzionante, in un callback dopo aver aggiunto un nuovo elemento:

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

È strano che non ci sia alcuna documentazione a riguardo nel codex.

Soluzione funzionante finale:

Aggiungi un'azione in WordPress, ad esempio My_Action_Name (nota anche l'ID della 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;
});

Ora, nella Dashboard, esegui questa funzione (nota l'uso di My_TextAreaID_22 e My_Action_Name):

function start_Ajax_request() { 
    My_New_Global_Settings =  tinyMCEPreInit.mceInit.content;       // Ottieni le impostazioni predefinite di Wordpress (Non posso confermare, ma se hai bisogno di cambiare l'ID target, aggiungi questa riga:  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();     // < ---- ESEGUI

Devi richiamare nuovamente l'inizializzazione dell'editor dopo aver aggiunto la tua textarea via AJAX, io l'ho fatto così:

$.fn.tinymce_textareas = function(){
  tinyMCE.init({
    skin : "wp_theme"
    // altre opzioni qui
  });
};

Poi richiama la tua funzione dopo l'AJAX, in questo modo:

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

La soluzione utilizzabile da @toscho su GitHub. Ha creato questo bel risultato anche per una domanda qui, vedi la sua risposta per maggiori dettagli.

L'ho gestito in questo modo:

1. Per prima cosa devi chiamare wp_editor nella pagina principale, da cui chiami l'ajax. Ma devi racchiuderlo in un div nascosto:

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

L'ID deve essere casuale e univoco. Le impostazioni devono essere le stesse delle impostazioni nel tuo editor ajax.

2. In secondo luogo, devi chiamare questo nella risposta ajax:

wp_editor( '', '[imposta l\'id come necessario]', array(le stesse impostazioni della pagina principale) ); _WP_Editors::editor_js(); //questo stampa il codice di inizializzazione dell'editor

Questo funzionerà nelle pagine di amministrazione.

Per aggiungere un nuovo editor wp a un contenitore tramite JS AJAX:

1) Creare una funzione wp_ajax in functions.php per restituire l'editor wp

2) Creare uno script jQuery per richiedere un nuovo editor di testo e aggiungerlo a un contenitore, in questo caso, quando si preme un pulsante

File PHP

function yourprefix_get_text_editor() {
    $content = ""; // Vuoto perché è un nuovo editor
    $editor_id = $_POST["text_editor_id"]; // ID casuale dalla chiamata AJAX JS
    $textarea_name = $_POST["textarea_name"]; // Nome dal file JS
    $settings = array(
        'textarea_name' => $textarea_name
    );
    wp_editor($content, $editor_id, $settings);
    wp_die(); // wp_die obbligatorio
}
add_action('wp_ajax_yourprefix_get_text_editor', 'yourprefix_get_text_editor');

Script JS (jsfile.js)

jQuery(function($) {
$("someelement").click(function(e) { // Per aggiungere un editor al click di un pulsante
    var target = themeajax.ajax_url; // Passato da wp_localize_script
    var editor_id = "editorid"; // Genera questo dinamicamente
    var textarea_name = "textareaname" // Generalo come necessario
    var data = {
        'action': 'yourprefix_get_text_editor',
        'text_editor_id': editor_id,
        'textarea_name': textarea_name
    }
    $.post(target, data, function(response) {
        container.append(response); // Usa la tua logica per ottenere il contenitore dove vuoi aggiungere l'editor
        tinymce.execCommand('mceAddEditor', false, editor_id);
        quicktags({id : editor_id});
    });
}
});

Chiamata per accodare gli script:

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

Usa questo codice, spero ti sia utile:

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

Puoi trovare maggiori dettagli qui.