Как добавить текстовый редактор TinyMCE на страницу опций плагина?

Question

[Александр Соболев]

Пишу плагин. Есть необходимость добавить TinyMCE на страницу опций плагина. Знаю, что делается через wp_editor(), но как правильно добавлять в "контейнер" опции и назначать переменной текст для последующего сохранения и редактирования ?

Answer 1

[Егор Соколов]

Что имееется ввиду под "добавлять в "контейнер" опции"?
Вариант 1, через php:

$set_of_buttons = add_filter('mce_buttons', create_function('', "return ['bold', 'italic', 'underline', 'bullist', 'numlist', 'alignleft', 'aligncenter', 'alignright', 'undo', 'redo'];")); // можно указать кнопки, которые будут в редакторе
$editor_params = [
	'wpautop'       => 0, // автоматически оборачивать абзацы в теги <p>
	'media_buttons' => 0,
	'textarea_name' => 'post_content', // параметр name для textarea, который будет в $_POST при передаче на сервер
	'textarea_rows' => 10,
	'tinymce'       => $set_of_buttons, 
	'quicktags'     => 0,
	'drag_drop_upload' => 0
];
wp_editor( $content, $tiny_name, $editor_params ); // $content - сюда контент который сразу пихать в редактор; $tiny_name - имя для манипуляций через js; $editor_params - параметры

Вариант 2, разметка через php, инициализация через js
Разметка

wp_enqueue_editor(); // подключает все скрипты и стили для tinyMCE
<textarea name="post-content" id="post-content" cols="30" rows="10"><?= $content ?></textarea>

Инициализация

tinymce.init({
selector:'#post-content',
branding: false,
toolbar1: 'bold italic underline | bullist numlist | alignleft aligncenter alignright | undo redo', // кнопки
content_css: ['//fonts.googleapis.com/css?family=Open+Sans:400,600&subset=cyrillic'],  // подключаю шрифт покрасивше
menubar: false,
});

Полный список параметров можно посмотреть на оф. сайте tinyMCE, много их
Важный момент, перед отправкой на сервер, нужно сохранить из редактора в textarea, такой сниппет:
tinymce.triggerSave();

Answer 2

[Александр Соболев]

Контейнер - секция опции на странице настроек плагина. По коду ниже будет понятнее, наверное
Сейчас у меня есть решение с textarea:

add_settings_section( 'now_open_section_widgetcontent', 'Содержание Виджетов', '', $now_open_page );

$now_open_field_params = array(
      'type'      => 'textarea', 
      'id'        => 'now_open_opentxt',
      'desc'      => 'Например:  "Мы Ждем Вас по адресу: Красная пл., 1.  Добро пожаловать! "', 
      'label_for' => 'Виджет "Рабочее время"',
      
  );
  add_settings_field( 'txt', 'Ваше приветствие ', 'now_open_option_display_settings', $now_open_page, 'now_open_section_widgetcontent', $now_open_field_params );

Ну и свитч-кейс, соответственно:

switch ( $type ) {  
    case 'textarea':  
      $o[$id] = esc_attr( stripslashes($o[$id]) );
      echo "<textarea class='code large-text' cols='50' rows='5' type='text' id='$id' name='" . $option_name . "[$id]'>$o[$id]</textarea>";  
      echo ($desc != '') ? "<br /><span class='description'>$desc</span>" : "";  
    break;
  }

Вопрос в том, как заменить текстовое поле на красивый редактор и сохранить его значение в переменную опции плагина.

Comments

[Егор Соколов]

Вместо вашего

echo "<textarea class='code large-text' cols='50' rows='5' type='text' id='$id' name='" . $option_name . "[$id]'>$o[$id]</textarea>";

попробуйте вставить кусок, который я написал в первом комментарии, где wp_editor()