wp_editor() │ WP 3.3.0

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

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

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

Хуков нет.

Возвращает

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

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

wp_editor( 'content', 'editorid', 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.

ВАЖНО! Может содержать только буквы в нижнем регистре [a-z]. Тире (-), подчеркивание (_) использовать нельзя, например: editpost, mycustomeditor.

$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.
По умолчанию: 0

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

Примеры

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

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

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

wp_editor( $content, $editor_id );

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

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

wp.editor.initialize( 'EditorTextArea', {

	tinymce: {
		wpautop  : true,
		theme    : 'modern',
		skin     : 'lightgray',
		language : 'en',
		formats  : {
			alignleft  : [
				{ selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: { textAlign: 'left' } },
				{ selector: 'img,table,dl.wp-caption', classes: 'alignleft' }
			],
			aligncenter: [
				{ selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: { textAlign: 'center' } },
				{ selector: 'img,table,dl.wp-caption', classes: 'aligncenter' }
			],
			alignright : [
				{ selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: { textAlign: 'right' } },
				{ selector: 'img,table,dl.wp-caption', classes: 'alignright' }
			],
			strikethrough: { inline: 'del' }
		},
		relative_urls       : false,
		remove_script_host  : false,
		convert_urls        : false,
		browser_spellcheck  : true,
		fix_list_elements   : true,
		entities            : '38,amp,60,lt,62,gt',
		entity_encoding     : 'raw',
		keep_styles         : false,
		paste_webkit_styles : 'font-weight font-style color',
		preview_styles      : 'font-family font-size font-weight font-style text-decoration text-transform',
		tabfocus_elements   : ':prev,:next',
		plugins    : 'charmap,hr,media,paste,tabfocus,textcolor,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpview',
		resize     : 'vertical',
		menubar    : false,
		indent     : false,
		toolbar1   : 'bold,italic,strikethrough,bullist,numlist,blockquote,hr,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,fullscreen,wp_adv',
		toolbar2   : 'formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help',
		toolbar3   : '',
		toolbar4   : '',
		body_class : 'id post-type-post post-status-publish post-format-standard',
		wpeditimage_disable_captions: false,
		wpeditimage_html5_captions  : true

	},
	quicktags   : true,
	mediaButtons: true

} )

Добавить свой пример