wp_editor() │ WP 3.3.0

Displays the text editor - Quicktags (textarea with buttons) and TinyMCE (visual editor). Can be used in templates, on pages like: post, static page, etc.

let content = window.tinyMCE.get('editor_id').getContent()
// The content in this case will be obtained with all HTML tags:
// <p>Content written for <strong>test</strong></p>

window.tinyMCE.triggerSave()
let content = jQuery('#editor_id').val()
// The content in this case will be processed - unnecessary HTML tags will be removed:
// Content written for <strong>test</strong>

No Hooks.

Returns

null. Outputs the HTML code of the form.

Template usage

wp_editor( 'content', 'editorid', array(
	'wpautop'       => 1,
	'media_buttons' => 1,
	'textarea_name' => '', //must be specified!
	'textarea_rows' => 20,
	'tabindex'      => null,
	'editor_css'    => '',
	'editor_class'  => '',
	'teeny'         => 0,
	'dfw'           => 0,
	'tinymce'       => 1,
	'quicktags'     => 1,
	'drag_drop_upload' => false
) );

Usage

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

$content(string) (required)

Predefined text in the form field.

$editor_id(string) (required)

Identifier for the textarea and TinyMCE fields.

IMPORTANT! Can only contain lowercase letters [a-z]. Hyphens (-), underscores (_) cannot be used, for example: editpost, mycustomeditor.

$settings(array)

Array of arguments (see below).
Default: presets

Arguments of the $settings parameter

wpautop(boolean)

1 - apply the function wpautop().
Default: 1

media_buttons(boolean)

Show media button (insert/upload).
Default: 1

textarea_name(string)

value of the name attribute for the textarea field.
Default: $editor_id

textarea_rows(number)

Number of rows in the form field. Height of the text input field. By default, the value is taken from the admin panel settings.
Default: get_option('default_post_edit_rows', 10)

tabindex(number)

Value of the tabindex attribute for the textarea field.
Default: 0

editor_css(string)

Additional CSS styles for the editor. Must be specified in the <style> tag. The text specified here will be placed right before the form.
Default: ''

editor_class(string)

Additional CSS classes for the textarea field.
Default: ''

teeny(boolean)

Show a reduced editor or a full one. In the reduced version, the button for the additional second panel will be hidden. Special filters and events will also work for it. 1 - will hide the button.

dfw(boolean)

Replace the default fullscreen mode with DFW (requires special DOM elements and CSS).

tinymce(boolean/array)

Load the TinyMCE visual editor or not. You can specify editor parameters directly in the array(). Possible array elements: from the file: /wp-includes/class-wp-editor.php:

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

// then
$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'] );

// where $mce_buttons looks like this
$mce_buttons = [
	'formatselect', 'bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr',
	'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'spellchecker'
];
// and additional buttons in the array:
'fullscreen', 'wp_adv'

// And this is how the second button panel looks
$mce_buttons_2 = [
	'strikethrough', 'hr', 'forecolor', 'pastetext', 'removeformat',
	'charmap', 'outdent', 'indent', 'undo', 'redo', 'wp_help'
];

Also, the button set can be changed through filters. Here are all the filters that are responsible for the button set:

// If the teeny option is set (reduced)
$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 );

// If the full editor
$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 );

If an empty array is returned, the default buttons will be shown, not the absence of buttons, as may seem at first glance.

Default: 1

quicktags(boolean/array)

Load the HTML editor or not. You can specify parameters directly in the array(). Possible array elements:

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

Default: 1

drag_drop_upload(boolean)

Enables Drag-and-Drop support when uploading files (since WordPress 3.9)
Default: false

Examples

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

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

<?php wp_editor( '', 'wpeditor', [ '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 );

Add Your Own Example