Как создать WP Editor с помощью JavaScript

WP 5.3.2

Создаю плагин с Ajax-подгрузкой страниц, необходимо получать данные из нескольких динамически загружаемых редакторов WP.

ПРИМЕЧАНИЕ: Пример ниже для области wp-admin, если нужно для фронтенда, возможно, потребуется доработка.

1. Убедитесь, что скрипты редактора загружены:

add_action( 'admin_enqueue_scripts', 'load_admin_scripts');
function load_admin_scripts() {
  // НЕ загружайте на всех страницах админки, добавьте логику для загрузки только на ваших страницах
  wp_enqueue_editor();
}

2. Получаем текстовое поле редактора через Ajax (PHP):

function your_ajax_get_editor_callback() {
  // Важно: каждый редактор должен иметь уникальные name и id
  return '<textarea name="my-wp-editor" id="my-wp-editor" rows="12" class="myprefix-wpeditor">Значение из базы данных здесь :-)</textarea>';
}

3. Используем JS скрипт с Ajax для загрузки и удаления WP редакторов в колбэке успешного Ajax запроса.

Я все еще экспериментирую с доступными плагинами TinyMCE, смотрите документацию TinyMCE и учтите, что WP переименовал некоторые из них. Проверьте wp-includes/js/tinymce/plugins. В примере ниже я добавил fullscreen, удобный плагин, который по умолчанию отключен.

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

    // Сохраняем id для последующего удаления
    active_editors.push(editor_id);

  });

}

4. Получаем содержимое каждого редактора с помощью:

function get_editor_content() {

  // ПРИМЕЧАНИЕ: в моем приложении этот код находится внутри цикла полей

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

  var mce_editor = tinymce.get(editor_id);
  if(mce_editor) {
    val = wp.editor.getContent(editor_id); // Активна вкладка "Визуально"
  } else {
    val = $('#'+editor_id).val(); // Активна вкладка "HTML"
  }

}

Важные моменты:

• Используйте wp.editor.initialize(editor_id_here) на чистом <textarea>, не используйте wp_editor() для HTML вывода.
• Убедитесь, что удаляете редактор с помощью wp.editor.remove(editor_id), если он больше не присутствует в DOM. Если этого не сделать, инициализация редактора завершится ошибкой при повторной динамической загрузке.
• Получение содержимого редактора различается для каждой вкладки (Визуально / HTML)

ПРИМЕЧАНИЕ: Приведенные примеры кода не полностью протестированы и могут содержать ошибки. В моем приложении они работают. Это лишь отправная точка.

Сначала необходимо использовать wp_enqueue_editor(); для вывода скриптов, таблиц стилей и настроек по умолчанию редактора. Документацию можно найти здесь: wp_enqueue_editor()

Нужно удалить true из функции следующим образом: wp.editor.initialize(editorId);

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

Это сработало для меня. Благодарю за ответ Goran Jakovljevic на: Как загрузить wp_editor через AJAX