Tengo un tema desarrollado a medida y realmente complejo. Una de las cosas que tengo es múltiples áreas de contenido donde los usuarios pueden especificar contenido para pestañas específicas. Cargo varias instancias del editor de WordPress a través de la wp_editor()función. Funciona perfectamente (Todo esto está en el lado del administrador, en el tipo de publicación "Página")

Sin embargo, comencé a hacer algunas mejoras, incluida la capacidad de agregar / eliminar pestañas dinámicamente (antes, cargué 6 editores en la página). Los usuarios pueden tener 1-7 pestañas.

Cuando los usuarios agregan una pestaña, debe agregar una instancia del editor a la página. Sin embargo, no importa lo que intente, no puedo hacer que se cargue y se muestre correctamente.

Aquí están las 2 cosas que he probado hasta ahora:

1. Cree un archivo php que incluya el bootstrap de administrador y luego cargue el editor con wp_editor(). Luego hago un jQuery $.loadpara llamar a la página e incluir el HTML resultante en el área que necesita mostrar. Sin embargo, esto realmente no funciona, ya que los botones de formato de los editores desaparecen (vale la pena señalar que al abrir la página directamente, el editor se muestra y funciona perfectamente)
2. Cargó el editor en la página, dentro de un div oculto, y luego una vez que se agrega una pestaña, use jquery para moverlo a su lugar. Esto carga el editor con tacto, pero no puede usar ninguno de los botones del editor (se muestran, pero no hacen nada), y no puede colocar el cursor en el área de texto (sin embargo, es curioso que cambie al modo HTML permite escribir y cierta interacción con los botones de modo HTML)

Entonces la pregunta es, ¿alguien ha tenido suerte agregando editores a través de llamadas AJAX? ¿Algún consejo?

Para que aparezcan las etiquetas rápidas, debe volver a crearlas en su controlador completo ajax.

quicktags({id : 'editorcontentid'});

Mi controlador de éxito ajax se ve así;

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

Me las arreglé para cargar el editor al llamar primero a una función estática que crea el editor y lo almacena en caché como variable. Ejecuto el método de creación del editor en init. Esto parece hacer que WordPress agregue todos los scripts requeridos.

Es importante que cuando cree su instancia de editor, que la configure para usar tinymce, de esa manera también se conquista el archivo tinymce js.

Después de luchar con él, encontré la solución que funciona, en una devolución de llamada después de agregar un nuevo elemento:

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

Es extraño que no haya documentación dentro del códice.

Finalmente, solución de trabajo:

agregue acción en wordpress, digamos My_Action_Name(también tenga en cuenta, ID de área de texto 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;
});

ahora, en Dashboard, ejecute esta función (nota, usando My_TextAreaID_22y 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

Debe volver a llamar al editor init una vez que agregue su área de texto ajax, lo hice así:

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

Luego llame a su función después de su ajax, así:

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

La solución utilizable de @toscho en github . Él construyó este buen resultado también para una pregunta aquí, vea su respuesta para más detalles.

Use este código, espero que ayude:

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

Más detalles se pueden encontrar aquí .

Lo logré de esta manera:

1. Primero debes llamar a wp_editor en la página principal, desde donde llamas a ajax. Pero debes envolverlo en div oculto:

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

La identificación debe ser rundom y única. La configuración debe ser la misma que la configuración de su editor ajax.

2. En segundo lugar, debe llamar a esto en respuesta 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

Esto funcionará en las páginas de administración.

Para agregar un nuevo editor de wp a un contenedor por JS AJAX:

1) Cree una función wp_ajax en functions.php para devolver el wp_editor

2) Cree un script jQuery para solicitar un nuevo editor de texto y añádalo a un contenedor, para este caso, al presionar un botón

Archivo 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});
    });
}
});

Llamada de secuencias de comandos en cola:

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