Cómo cargar wp_editor () a través de AJAX / jQuery

22

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?

Aaron Wagner
fuente
intentaste hacer una llamada ajax vía admin-ajax.php? Si no hace una función con su códigoadmin-ajax.php
llámelo a
¿ Ayuda esta sugerencia ? Si es así, no es una pregunta de WordPress. :)
fuxia
@Sisir, si estoy leyendo tu sugerencia correctamente, entonces no funcionó. Usé esto para llamar al formulario Ajax: $('#sph-tabs-section-tab'+newTab).load('/wp-admin/admin-ajax.php?action=sph_add_editor');y luego agregué una función que devuelve wp_editor(). Se llama sin problemas, pero aún así solo devuelve el editor sin botones. (exactamente los mismos resultados que el ítem 1 en el PO)
Aaron Wagner
Una vez inicializado, TinyMCE no se puede mover en DOM. Debe eliminarlo, moverse en DOM e inicializar nuevamente. Código similar pero para comentarios frontend aquí en mi blog: techytalk.info/… El formulario de comentarios se mueve cuando el usuario hace clic en responder / cancelar respuesta.

Respuestas:

7

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.

Dale Sattler
fuente
4

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.

Goran Jakovljevic
fuente
1
tinymce es un recurso externo, así que creo que podrían pensar que los documentos de tinymce lo cubren, tinymce.com/docs , pero son muy pobres en ejemplos ... ¡ También debes incluir scripts de tincemce para que esta respuesta funcione! (la forma más simple es generar un PHP ficticio wp_editor()con tinymcearg establecido en true:-)
jave.web
gracias amigo ... esto también funciona para mí: después de devolver los datos de ajax, simplemente inicializo eso ...;)
Sagive SEO
3

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
T.Todua
fuente
2

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();
shahar
fuente
2
Por favor explique cómo funciona esto. Esto no funciona. Lo intenté.
Ahmed Fouad
Después de agregar el contenido ajax que contiene el área de texto que quiero tinyMCE en ( response), llame a la función tinymce_textareas que inicializa tinyMCE en las nuevas áreas de texto.
shahar
1

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.

bueltge
fuente
Esto requiere una biblioteca para su uso - T5 ... no es una solución solo para WP
cale_b
0

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í .

Dileep Kumar Awasthi
fuente
Comparta una idea general de cómo puede ayudar este código y luego agregue el enlace para obtener más detalles. Las respuestas de solo enlace se vuelven inválidas si el enlace está roto, espero que lo entiendas. :)
Mayeenul Islam
Ese enlace está roto en este momento y no tengo ningún contexto detrás de la respuesta. (Una de las muchas razones por las que las respuestas de "solo un enlace" son malas)
Sudar
Esto funciona pero tiene algunos problemas, cuando selecciona texto o visual crea áreas de texto duplicadas dentro del editor
Johan Pretorius
0

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.

  1. 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

Tim Matz
fuente
0

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');
Isaac Levi Felix Salinas
fuente