Cómo crear un editor de WP usando JavaScript

WP 5.3.2

Actualmente construyendo un plugin con carga de páginas Ajax, necesitaba obtener datos de múltiples editores de WP que se cargan dinámicamente.

NOTA: El siguiente ejemplo es para el área de wp-admin, si deseas esto para el front-end puede que necesites extenderlo.

1. Asegúrate de que los scripts del editor estén cargados con:

add_action( 'admin_enqueue_scripts', 'load_admin_scripts');
function load_admin_scripts() {
  // NO lo cargues en cada página de admin, crea alguna lógica para cargarlo solo en tus páginas
  wp_enqueue_editor();
}

2. Obtén el textarea del editor con Ajax (PHP):

function your_ajax_get_editor_callback() {
  // Nota: cada editor necesita su propio nombre e id únicos
  return '<textarea name="my-wp-editor" id="my-wp-editor" rows="12" class="myprefix-wpeditor">El valor desde la base de datos aquí :-)</textarea>';
}

3. Usa un script JS con Ajax para cargar y eliminar los editores de WP en la devolución de llamada exitosa de Ajax.

Todavía estoy experimentando con todos los plugins disponibles de tinymce, consulta la documentación de TinyMCE y ten en cuenta que WP ha renombrado algunos de ellos. Revisa wp-includes/js/tinymce/plugins. En el ejemplo de abajo he añadido fullscreen, un práctico plugin que está desactivado por defecto.

var active_editors = [];

function ajax_succes_callback() {
  remove_active_editors();
  init_editors();
}

function remove_active_editors() {
  $.each( active_editors, function( i, editor_id ) {
    wp.editor.remove(editor_id);
  }
  active_editors = [];
}

function init_editors() {

  $.each( $('.myprefix-wpeditor'), function( i, editor ) {

    var editor_id = $(editor).attr('id');
    wp.editor.initialize(
      editor_id,
      {
        tinymce: {
          wpautop: true,
          plugins : 'charmap colorpicker compat3x directionality fullscreen hr image lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview',
          toolbar1: 'bold italic underline strikethrough | bullist numlist | blockquote hr wp_more | alignleft aligncenter alignright | link unlink | fullscreen | wp_adv',
          toolbar2: 'formatselect alignjustify forecolor | pastetext removeformat charmap | outdent indent | undo redo | wp_help'
        },
        quicktags: true,
        mediaButtons: true,
      }
    );

    // Guarda el id para eliminarlo más tarde
    active_editors.push(editor_id);

  });

}

4. Obtén el contenido de cada editor con:

function get_editor_content() {

  // NOTA: en mi aplicación el código de abajo está dentro de una iteración de campos (bucle)

  var editor_id = $(field).attr('id');

  var mce_editor = tinymce.get(editor_id);
  if(mce_editor) {
    val = wp.editor.getContent(editor_id); // La pestaña Visual está activa
  } else {
    val = $('#'+editor_id).val(); // La pestaña HTML está activa
  }

}

Puntos clave:

• Usa wp.editor.initialize(editor_id_here) en un <textarea> limpio, no uses wp_editor() para la salida HTML.
• Asegúrate de eliminar el editor con wp.editor.remove(editor_id) si ya no está presente en el DOM. Si no haces esto, la inicialización del editor fallará cuando cargues el editor (dinámicamente) por segunda vez.
• Obtener el contenido del editor es diferente para cada pestaña (Visual / HTML)

NOTA: Los ejemplos de código anteriores no están completamente probados y pueden contener algunos errores. Los tengo funcionando completamente en mi aplicación. Es puramente para orientarte.

Necesitas usar primero wp_enqueue_editor(); para cargar los scripts del editor, hojas de estilo y configuraciones predeterminadas. Puedes encontrar esto documentado aquí wp_enqueue_editor()

Necesitas eliminar true de la función así: wp.editor.initialize(editorId);

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

Esto funcionó para mí. Gracias a la respuesta de Goran Jakovljevic en: Cómo cargar wp_editor mediante AJAX