Cum să creezi WP Editor folosind JavaScript

WP 5.3.2

În prezent construiesc un plugin cu încărcare de pagini Ajax, fiind nevoie să obțin date din mai mulți editori WP care sunt încărcați dinamic.

NOTĂ: Exemplul de mai jos este pentru zona wp-admin, dacă doriți acest lucru pentru front-end, poate fi necesară extinderea.

1. Asigurați-vă că scripturile editorului sunt încărcate cu:

add_action( 'admin_enqueue_scripts', 'load_admin_scripts');
function load_admin_scripts() {
  // NU încărcați pe fiecare pagină de admin, creați o logică pentru a le încărca doar pe paginile dumneavoastră
  wp_enqueue_editor();
}

2. Obțineți textarea editorului cu Ajax (PHP):

function your_ajax_get_editor_callback() {
  // Notă: fiecare editor are nevoie de un nume și un id unic
  return '<textarea name="my-wp-editor" id="my-wp-editor" rows="12" class="myprefix-wpeditor">Valoarea din baza de date aici :-)</textarea>';
}

3. Utilizați un script JS Ajax pentru a încărca și elimina editorii WP pe callback-ul de succes Ajax.

Încă experimentez cu toate pluginurile disponibile tinymce, consultați documentația TinyMCE și rețineți că WP a redenumit unele dintre ele. Verificați wp-includes/js/tinymce/plugins. În exemplul de mai jos am adăugat fullscreen, un plugin util care este dezactivat implicit.

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ți id-ul pentru eliminare ulterioară
    active_editors.push(editor_id);

  });

}

4. Obțineți conținutul de la fiecare editor cu:

function get_editor_content() {

  // NOTĂ: în aplicația mea codul de mai jos este în interiorul unei iterații de câmpuri (buclă)

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

  var mce_editor = tinymce.get(editor_id);
  if(mce_editor) {
    val = wp.editor.getContent(editor_id); // Tab-ul Visual este activ
  } else {
    val = $('#'+editor_id).val(); // Tab-ul HTML este activ
  }

}

Indicații:

• Utilizați wp.editor.initialize(editor_id_here) pe un <textarea> curat, nu utilizați wp_editor() pentru output HTML.
• Asigurați-vă că eliminați editorul cu wp.editor.remove(editor_id) dacă acesta nu mai este prezent în DOM. Dacă nu faceți acest lucru, inițializarea editorului va eșua când încărcați editorul (dinamic) pentru a doua oară.
• Obținerea conținutului editorului este diferită pentru fiecare tab (Visual / HTML)

NOTĂ: Exemplele de cod de mai sus nu sunt testate integral și pot conține unele erori. Le am funcționale complet în aplicația mea. Sunt pur și simplu pentru a vă ajuta să începeți.

Trebuie să folosești mai întâi wp_enqueue_editor(); pentru a afișa scripturile, foile de stil și setările implicite ale editorului. Poți găsi documentația aici wp_enqueue_editor()

Trebuie să elimini valoarea true din funcție astfel: wp.editor.initialize(editorId);

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

A funcționat pentru mine. Mulțumiri răspunsului lui Goran Jakovljevic pe: Cum să încarci wp_editor prin AJAX