wp_editor() │ WP 3.3.0

Виводить на екран поле форми textarea зі стандартним візуальним та HTML редактором WP (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 у полі текстової області.


За замовчуванням: 0

editor_css
(рядок)

Додаткові стилі CSS для редактора. Потрібно вказувати у тезі
<style>. Вказаний тут текст буде розташований прямо перед формою.


За замовчуванням: ”

editor_class
(рядок)

Додаткові CSS класи до текстового поля.


За замовчуванням: ”

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

Додати свій приклад