Ho un tema sviluppato su misura e davvero complesso. Una delle cose che ho sono più aree di contenuto in cui gli utenti possono specificare il contenuto per schede specifiche. Carico più istanze dell'editor WordPress attraverso la wp_editor()funzione. Funziona perfettamente. (Questo è tutto dal lato amministratore, nel tipo di post "Pagina")

Tuttavia, ho iniziato a apportare alcuni miglioramenti, tra cui la possibilità di aggiungere / rimuovere schede in modo dinamico (prima, ho caricato 6 editor sulla pagina). Gli utenti possono avere 1-7 schede.

Quando gli utenti aggiungono una scheda, è necessario aggiungere un'istanza dell'editor alla pagina. Tuttavia, indipendentemente da ciò che provo, non riesco a caricarlo e visualizzarlo correttamente.

Ecco le 2 cose che ho provato finora:

1. Crea un file php con il bootstrap di amministrazione incluso, quindi carica l'editor wp_editor(). Faccio quindi un jQuery $.loadper chiamare la pagina e includere l'HTML risultante nell'area che deve essere visualizzata. Questo non funziona davvero, tuttavia, poiché i pulsanti di formattazione degli editor scompaiono (vale la pena notare che tirando la pagina direttamente in su, l'editor visualizza e funziona perfettamente)
2. Ha caricato l'editor sulla pagina, all'interno di un div nascosto, quindi una volta aggiunta una scheda, usa jquery per spostarlo in posizione. Questo carica l'editor in tatto, ma non è possibile utilizzare nessuno dei pulsanti dell'editor (vengono visualizzati, ma non fanno nulla) e non è possibile posizionare il cursore nell'area di testo (curioso, tuttavia, che il passaggio alla modalità HTML consente la digitazione e alcune interazioni con i pulsanti della modalità HTML)

Quindi la domanda è: qualcuno ha avuto fortuna ad aggiungere editor tramite le chiamate AJAX? Qualche consiglio?

Per visualizzare le etichette rapide, devi istanziarle nuovamente nel gestore ajax del gestore completo.

quicktags({id : 'editorcontentid'});

Il mio gestore del successo ajax si presenta così;

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

Sono riuscito a caricare l'editor facendo prima chiamare una funzione statica che crea l'editor e lo memorizza nella cache come variabile. Eseguo il metodo di creazione dell'editor su init. Questo sembra convincere WordPress a incassare tutti gli script richiesti.

È importante che quando crei la tua istanza dell'editor, che la imposti per utilizzare tinymce, in questo modo anche il file js tinymce viene richiesto.

Dopo aver lottato con esso, ho trovato la soluzione che funziona, in una richiamata dopo aver aggiunto un nuovo elemento:

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

È strano che non ci sia documentazione all'interno del codice.

Infine, soluzione di lavoro:

aggiungi azione in wordpress, diciamo My_Action_Name(nota anche, ID 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, in Dashboard, esegui questa funzione (nota, usando di My_TextAreaID_22e 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

Devi chiamare di nuovo l'editor init dopo aver aggiunto la tua textarea ajax, l'ho fatto così:

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

Quindi chiama la tua funzione dopo il tuo Ajax, in questo modo:

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

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

Usa questo codice, spero che ti sia d'aiuto:

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

Maggiori dettagli possono essere trovati qui .

L'ho gestito in questo modo:

1. Per prima cosa devi chiamare wp_editor nella pagina principale, da dove chiami ajax. Ma devi avvolgerlo in div nascosti:

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

L'ID deve essere esclusivo e unico. Le impostazioni devono essere uguali a quelle nell'editor Ajax.

2. In secondo luogo è necessario chiamare questo in risposta 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

Questo funzionerà sulle pagine di amministrazione.

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

1) Creare una funzione wp_ajax in Functions.php per restituire wp_editor

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 = ""; // 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 Script (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});
    });
}
});

Enqueue script call:

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