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

22

Tengo un tema que es personalizado desarrollado y realmente complejo. Una de las cosas que tengo son las 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 función wp_editor() . Funciona perfectamente. (Esto es todo en el lado del administrador, en el tipo de publicación "Página")

Sin embargo, comencé a realizar algunas mejoras, incluida la posibilidad 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 cargarlo y mostrarlo correctamente.

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

  1. Cree un archivo php que incluya la rutina de administración incluida y luego cargue el editor con wp_editor() . Luego hago un jQuery $.load para llamar a la página e incluir el HTML resultante en el área que necesita mostrar. Sin embargo, esto no funciona realmente, ya que los botones de formato de los editores desaparecen (vale la pena señalar que al levantar la página directamente, el editor 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 al 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 (es curioso, sin embargo, cambiar al modo HTML). permite escribir y cierta interacción con los botones de modo HTML)

La pregunta es, ¿alguien ha tenido suerte al agregar editores a través de las llamadas AJAX? ¿Algún consejo?

    
pregunta Aaron Wagner 10.05.2012 - 17:30

8 respuestas

6

Para que aparezcan las etiquetas rápidas, debe volver a crearlas dentro de su controlador incompleto 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']);
        }

Logré que el editor se cargara llamando 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 encoque todos los scripts requeridos.

Es importante que cuando crees tu instancia de editor, la configures para que use tinymce, de esa manera también se encoja el archivo tinymce js.

    
respondido por el Dale Sattler 04.10.2012 - 05:11
2

Debes volver a llamar al editor init una vez que agregues tu ajax textarea, lo hice así:

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

Luego, llama a tu función después de tu ajax, así:

$('#my_new_textarea_container').html(response).tinymce_textareas();
    
respondido por el shahar 20.05.2012 - 19:55
2

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 haya cero documentación dentro del códice.

    
respondido por el Goran Jakovljevic 05.04.2016 - 09:08
2

Finalmente, solución de trabajo:

agrega acción en wordpress, digamos My_Action_Name (también nota, ID 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 el Panel, ejecute esta función (nota, usando My_TextAreaID_22 y 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
    
respondido por el T.Todua 20.06.2015 - 21:36
1

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

    
respondido por el bueltge 17.02.2014 - 09:53
0

Use este código, espero que le ayude:

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

Puede encontrar más información aquí .

    
respondido por el Dileep Kumar Awasthi 15.04.2015 - 01:15
0

Lo logré de esta manera:

  1. Primero debes llamar a wp_editor en la página principal, desde donde llamas 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 completa y única. La configuración debe ser la misma que la de tu editor ajax.

  1. Segundo, necesita llamar a esto en la 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

    
respondido por el Tim Matz 11.10.2016 - 12:11
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 editor wp

2) Cree un script jQuery para solicitar un nuevo editor de texto y adjúntelo 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');

Script JS (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 scripts 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');
    
respondido por el Isaac Levi Felix Salinas 08.03.2018 - 22:46

Lea otras preguntas en las etiquetas