Come creare un editor WP utilizzando JavaScript

WP 5.3.2

Attualmente sto sviluppando un plugin con caricamento di pagine Ajax, necessario per ottenere dati da più editor WP che vengono caricati dinamicamente.

NOTA: L'esempio seguente è per l'area wp-admin, se vuoi utilizzarlo per il front-end potresti doverlo estendere.

1. Assicurati che gli script dell'editor siano caricati con:

add_action( 'admin_enqueue_scripts', 'load_admin_scripts');
function load_admin_scripts() {
  // NON caricarlo in ogni pagina di amministrazione, crea una logica per caricarlo solo nelle tue pagine
  wp_enqueue_editor();
}

2. Ottieni l'area di testo dell'editor con Ajax (PHP):

function your_ajax_get_editor_callback() {
  // Nota: ogni editor deve avere un nome e un id univoci
  return '<textarea name="my-wp-editor" id="my-wp-editor" rows="12" class="myprefix-wpeditor">Il valore dal database qui :-)</textarea>';
}

3. Utilizza uno script JS Ajax per caricare e rimuovere gli editor WP nella callback di successo di Ajax.

Sto ancora sperimentando con tutti i plugin tinymce disponibili, consulta la documentazione di TinyMCE e nota che WP ha rinominato alcuni di essi. Controlla wp-includes/js/tinymce/plugins. Nell'esempio seguente ho aggiunto fullscreen, un comodo plugin che è disabilitato di default.

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

    // Salva l'id per la rimozione successiva
    active_editors.push(editor_id);

  });

}

4. Ottieni il contenuto da ogni editor con:

function get_editor_content() {

  // NOTA: nella mia applicazione il codice seguente è all'interno di un'iterazione di campi (loop)

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

  var mce_editor = tinymce.get(editor_id);
  if(mce_editor) {
    val = wp.editor.getContent(editor_id); // La scheda Visuale è attiva
  } else {
    val = $('#'+editor_id).val(); // La scheda HTML è attiva
  }

}

Punti chiave:

• Usa wp.editor.initialize(editor_id_here) su un <textarea> pulito, non utilizzare wp_editor() per l'output HTML.
• Assicurati di rimuovere l'editor con wp.editor.remove(editor_id) se non è più presente nel DOM. Se non lo fai, l'inizializzazione dell'editor fallirà quando caricherai l'editor (dinamicamente) per una seconda volta.
• Ottenere il contenuto dell'editor è diverso per ogni scheda (Visuale / HTML)

NOTA: Gli esempi di codice sopra non sono stati completamente testati e potrebbero contenere alcuni errori. Li ho utilizzati con successo nella mia applicazione. Servono solo per farti partire.

Devi prima usare wp_enqueue_editor(); per caricare gli script dell'editor, i fogli di stile e le impostazioni predefinite. Puoi trovare la documentazione qui wp_enqueue_editor()

Devi rimuovere true dalla funzione in questo modo: wp.editor.initialize(editorId);

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

ha funzionato per me. Grazie alla risposta di Goran Jakovljevic su: Come caricare wp_editor via AJAX