El editor Wysiwyg de WordPress generado dinámicamente (wp_editor) no se muestra correctamente

4 minutos de lectura

Tengo 2 editores html wysiwyg en una página de administración de wordpress. Ambos usan la función WP_EDITOR(). El primero está codificado en la página:

<form name="form1" id="form1" method="post" action="" style="display:block;">
  <p>
    <!-- editor here -->
    <?php
       wp_editor( 'CONTENT WILL APPEAR HERE!', 'addsometxt', array('textarea_name'=>'create_txt','textarea_rows'=>10,'wpautop'=>false));
    ?>
  </p>
  <p>
   <input name="save" type="submit" class="button-primary" id="save" style="margin:5px;" value="Save Input" /></p>
</form>

El segundo se genera dinámicamente con una función de PHP usando una llamada AJAX (wp_ajax_ y $.post). Probé la llamada ajax y sé que funciona; entonces, por brevedad, aquí está la función php:

<?php
function display_editor2() {
// grab data from database (data_from_db) and display in editor
  wp_editor( $row->data_from_db, 'editsometxt', array('textarea_name'=>'edit_txt','textarea_rows'=>10,'wpautop'=>false));

} 
?>

El problema es que, aunque se muestra el segundo editor; le faltan todos los botones de la barra de herramientas. Vea la imagen a continuación para una ilustración. Alguien sabe a quien arreglar esto?

ingrese la descripción de la imagen aquí

  • Pasé SEMANAS tratando de hacer que wp_editor() llamara correctamente a través de AJAX y TODAVÍA no sé cómo se hace correctamente. Llegó con todo tipo de problemas maravillosos. Si fuera usted, me daría por vencido mientras todavía está por delante: pruebe con un método diferente que no requiera wp_editor() y Ajax.

    – Joe Hebilla

    1 de agosto de 2013 a las 15:36

  • @Joe Buckle — ¡JAJAJAJA! Sí, la situación parece sombría. Probablemente tenga que hackear tinymce. En mi investigación, encontré algunas posibles soluciones: Kathy Is Awesome’s tut here – tinyurl.com/ovu2x89 Lo mencionado anteriormente se basa en el comentario de Dimas Begunoff aquí (que usa sus Metaboxes de WPAlchemy): tinyurl.com/cp55h3d La solución más cercana para satisfacer mis necesidades estaba en este siguiente enlace, pero no pude hacer que funcionara: tinyurl.com/kkdmlkk

    – Rey C

    1 de agosto de 2013 a las 16:08


  • Revisé todos esos enlaces también. Cuando regrese a la oficina por la mañana, reflexionaré sobre mis métodos. Creé complementos que agregaban dinámicamente editores con todas las funciones, pero no de esta manera. desnudo conmigo

    – Joe Hebilla

    1 de agosto de 2013 a las 19:18

  • ¿No hay solución a esto todavía? 🙁 Me encontré con un problema similar mientras usaba Handlebars y un cuadro de diálogo emergente para mostrar el RTE. Todavía no funciona la solución 🙁 stackoverflow.com/questions/18347099/…

    – Diosney

    21 de agosto de 2013 a las 0:46

  • @diosney: en realidad, analicé de cerca la solución aquí y la hice funcionar: tinyurl.com/obah2eq. El único problema que tuve fue que las etiquetas rápidas todavía no se mostraban. Al final, opté por una solución alternativa.

    – Rey C

    29 de agosto de 2013 a las 8:13

avatar de usuario
amoroso

Yo tuve el mismo problema.

Cuando agrego el código <?php wp_footer(); ?> en mi footer.php, funciona.

  • @Markus Lea correctamente. Él también proporciona una solución.

    – Ondrej Janácek

    5 de enero de 2014 a las 19:14

Tuve exactamente el mismo problema y lo resolví de esta manera (WP 4.7):

Primero cree un editor oculto en su plantilla para que WP cargue todos los archivos necesarios para TinyMCE (la ID no importa):

<div style="display:none"><?php wp_editor('', 'hidden_editor'); ?></div>

Luego, después de agregar el nuevo editor al DOM, use las siguientes funciones:

quicktags({id :'your_new_editor_id'});
tinymce.execCommand('mceAddEditor', true, 'your_new_editor_id');

Usando tinymce.init no funcionó para mí, ya que no se reconoció la nueva ID del editor. Esas dos líneas vuelven a crear las etiquetas rápidas y agregan el nuevo editor.

Probablemente necesites agregar botones_de_medios y Tinymce parámetro en su llamada AJAX.

Algo como esto:

<?php
function display_editor2() {
    // grab data from database (data_from_db) and display in editor
    wp_editor( $row->data_from_db, 'editsometxt', array('textarea_name'=>'edit_txt','media_buttons'=>true,'tinymce'=>true,'textarea_rows'=>10,'wpautop'=>false));

    } 
?>

te recomiendo que revises wp_editor() Página de referencia de funciones en WordPress Codex.

  • ‘media_buttons’ es verdadero por defecto. Controla el texto y el ícono ‘Cargar/Insertar’, no los botones a los que me refiero.

    – Rey C

    10 de agosto de 2013 a las 2:54

avatar de usuario
Vinay Kumar

Hola, yo también tuve el mismo problema!

Simplemente desactivé todos los complementos que instalé y actualicé la página, y luego traté de editar la publicación/páginas en el área visual también. Compruebe una vez que funcionará para usted. 🙂

Tuve el mismo problema, usando esto:

<?php wp_editor(get_the_content()); ?>

Al pasar una ID (segundo parámetro a wp_editor) obtuve los botones. Como esto:

<?php wp_editor(get_the_content(), "with_a_ID_its_buttons_are_showing"); ?>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad