WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

wp_editor() WP 3.3

Выводит на экран поле формы textarea со стандартным визуальным и HTML редактором WP (TinyMCE). Можно использовать в шаблоне, на страницах типа: запись, постоянная страница и т.д.

Какие параметры может принимать JS объект wp.editor.initialize, читайте в вопросе.

Заметка: поле textarea заполняется введенным в визуальный редактор контентом при сабмите формы, в которую обернут редактор. Если нужно получить введенный контент до сабмита, например при AJAX запросе, то придется делать это в JS вручную, через глобальную переменную tinyMCE.

Получим контент без обработки, как есть - с тегами <p> и т.д.

let content = window.tinyMCE.get('editor_id').getContent()
// Контент в этом случае будет получен со всем HTML тегами:
// <p>Контент написанный для <strong>теста</strong></p>

Если нужно получить контент с обработкой, такой какой он обычно получается, то вызовите сначала событие tinyMCE.triggerSave(), а затем возьмите значение поля textarea:

window.tinyMCE.triggerSave()
let content = jQuery('#editor_id').val()
// Контент в этом случае будет обработан - будут удалены ненужные HTML теги:
// Контент написанный для <strong>теста</strong>

Несмотря на то что кнопка с комбинациями клавиш, которые можно использовать визуальном редакторе TyniMCE находится на виду, мало кто знает эти самые комбинации. А еще меньше тех, кто их использует. Взгляните на возможные комбинации наверняка там есть что-то полезное для вас:

Комбинации клавиш в визуальном редакторе WordPress

Хуков нет.

Возвращает

Выводит на экран html код формы.

Шаблон использования

wp_editor( 'content', 'editor_id', array(
	'wpautop'       => 1,
	'media_buttons' => 1,
	'textarea_name' => '', //нужно указывать!
	'textarea_rows' => 20,
	'tabindex'      => null,
	'editor_css'    => '',
	'editor_class'  => '',
	'teeny'         => 0,
	'dfw'           => 0,
	'tinymce'       => 1,
	'quicktags'     => 1,
	'drag_drop_upload' => false
) );

Использование

wp_editor( $content, $editor_id, $settings = array() );
$content(строка) (обязательный)
Заранее установленный текст в поле формы.
$editor_id(строка) (обязательный)
Идентификатор для полей textarea и TinyMCE. Может содержать только буквы в нижнем регистре (тире, подчеркивание использовать нельзя): editpost, mycustomeditor и т.д. Чтобы не было ошибок при использовании WYSIWYG редактора, не нарушайте это правило.
$settings(массив)
Массив аргументов (см. ниже).
По умолчанию: предустановки

Аргументы параметра $settings

wpautop(логический)
1 - применять функцию wpautop().
По умолчанию: 1
media_buttons(логический)
Показывать медиа кнопку (вставка/загрузка).
По умолчанию: 1
textarea_name(строка)
значение атрибута name у поля textarea.
По умолчанию: $editor_id
textarea_rows(число)
Количество строк у поля формы. Высота поля ввода текста. По-умолчанию берется значение их настроек админ-панели.
По умолчанию: get_option('default_post_edit_rows', 10)
tabindex(число)
Значение атрибута tabindex у поля textarea.
По умолчанию: нет
editor_css(строка)
Дополнительные CSS стили для редактора. Нужно указывать в теге <style>. Указанный здесь текст будет расположен прям перед формой.
По умолчанию: нет
editor_class(строка)
Дополнительные CSS классы к полю textarea.
По умолчанию: ''
teeny(логический)
Показать урезанный редактор или полный. В урезанном будут скрыта кнопка дополнительной второй панели. А также для него будут работать специальные фильтры и события. 1 - скроет кнопу.
dfw(логический)
Заменить полноэкранный режим по умолчанию на DFW (нужны специальные DOM элементы и CSS).
tinymce(логический/массив)

Загружать визуальный редактор TinyMCE или нет. Можно указать параметры редактора напрямую в массиве array(). Возможные элементы массива: из файла: /wp-includes/class-wp-editor.php:

$set['tinymce']['wp_autoresize_on']

// далее
$mceInit = array (
	'selector' => "#$editor_id",
	'resize'   => 'vertical',
	'menubar'  => false,
	'wpautop'  => (bool) $set['wpautop'],
	'indent'   => ! $set['wpautop'],
	'toolbar1' => implode($mce_buttons, ','),
	'toolbar2' => implode($mce_buttons_2, ','),
	'toolbar3' => implode($mce_buttons_3, ','),
	'toolbar4' => implode($mce_buttons_4, ','),
	'tabfocus_elements' => $set['tabfocus_elements'],
	'body_class' => $body_class
);

// Merge with the first part of the init array
$mceInit = array_merge( self::$first_init, $mceInit );

if ( is_array( $set['tinymce'] ) )
$mceInit = array_merge( $mceInit, $set['tinymce'] );

// где $mce_buttons выглядит так
$mce_buttons = [ 
	'formatselect', 'bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr',
	'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'spellchecker'
];
// и дополнительные кнопки в массиве:
'fullscreen', 'wp_adv'

// А так выглядит вторая панель кнопок
$mce_buttons_2 = [ 
	'strikethrough', 'hr', 'forecolor', 'pastetext', 'removeformat', 
	'charmap', 'outdent', 'indent', 'undo', 'redo', 'wp_help'
];

Также, изменить набор кнопок можно через фильтры. Вот все фильтры которые отвечают за набор кнопок:

// Если установлена опция teeny (урезанный)
$mce_teeny = [ 
	'bold', 'italic', 'underline', 'blockquote', 'strikethrough', 'bullist', 'numlist',
	'alignleft', 'aligncenter', 'alignright', 'undo', 'redo', 'link', 'unlink', 'fullscreen'
];
$mce_buttons = apply_filters( 'teeny_mce_buttons', $mce_teeny, $editor_id );

// Если полный редактор
$mce_buttons   = apply_filters( 'mce_buttons', $mce_buttons, $editor_id );
$mce_buttons_2 = apply_filters( 'mce_buttons_2', $mce_buttons_2, $editor_id );
$mce_buttons_3 = apply_filters( 'mce_buttons_3', array(), $editor_id );
$mce_buttons_4 = apply_filters( 'mce_buttons_4', array(), $editor_id );

По умолчанию: 1

quicktags(логический/массив)

Загружать HTML редактор или нет. Можно указать параметры напрямую в массиве array(). Возможные элементы массива:

array(
'id' => $editor_id,
'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen'
);

По умолчанию: 1

drag_drop_upload(логический)
Включает поддержку Drag-and-Drop при загрузке файлов (с версии WordPress 3.9)
По умолчанию: false

Примеры

#1. TinyMCE на страницах сайта

Выведем поле ввода текста с редактором TinyMCE и HTML редактором, где-нибудь на страницах сайта. Для этого вставим следующий код в шаблон, в то место где нужно вывести такое поле:

<?php wp_editor( '', 'wpeditor', array('textarea_name' => 'content') ); ?>

#2. Заполним поле контентом поста 51:

$post_id = 51;
$post = get_post( $post_id, OBJECT, 'edit' );

$content = $post->post_content;
$editor_id = 'editpost';

wp_editor( $content, $editor_id );

#3. Изменение настроек формы

Мы также может изменить настройки выводимой формы, если базовые нас не устраивают. Например, мы может убрать кнопку добавления медиафайлов:

$settings = array( 'media_buttons' => false );

wp_editor( $content, $editor_id, $settings );

Заметки

  • Смотрите: _WP_Editors::editor()
  • Смотрите: _WP_Editors::parse_settings()

Список изменений

С версии 3.3.0 Введена.

Код wp_editor() WP 5.5.1

wp-includes/general-template.php
<?php
function wp_editor( $content, $editor_id, $settings = array() ) {
	if ( ! class_exists( '_WP_Editors', false ) ) {
		require ABSPATH . WPINC . '/class-wp-editor.php';
	}
	_WP_Editors::editor( $content, $editor_id, $settings );
}

Cвязанные функции

Из раздела: Без рубрики

32 коммента
Полезные 4 Вопросы 2 Все