云策 WordPress 开发者社区

函数文档

wp_editor()

查看官方原文 ↗
💡 云策文档标注

概述

wp_editor() 函数用于渲染一个编辑器，支持 TinyMCE 和 Quicktags，是输出编辑器组件的标准方法。开发者应避免直接使用 _WP_Editors 类，并注意编辑器初始化后不能在 DOM 中安全移动。

关键要点

  • 函数用途：渲染编辑器，包含 TinyMCE 和 Quicktags 所需组件。
  • 参数说明：$content（初始内容，字符串，必需）、$editor_id（HTML ID，字符串，必需，不能包含方括号）、$settings（设置数组，可选，默认空数组）。
  • 注意事项：TinyMCE 编辑器初始化后不能安全移动 DOM，因此不建议在 meta box 中使用（除非仅用 Quicktags）。
  • 相关函数：_WP_Editors::editor() 用于输出编辑器 HTML，_WP_Editors::parse_settings() 用于解析设置。
  • 版本历史：自 WordPress 3.3.0 引入。

代码示例

// 基本用法：显示空编辑器
$content = '';
$editor_id = 'mycustomeditor';
wp_editor( $content, $editor_id );

// 自定义设置：隐藏媒体按钮
$settings = array( 'media_buttons' => false );
wp_editor( $content, $editor_id, $settings );

// 填充特定文章内容
$post = get_post( 51, OBJECT, 'edit' );
$content = $post->post_content;
wp_editor( $content, 'editpost' );

// 高级设置：自定义工具栏和移除按钮
$args = array(
    'media_buttons' => false,
    'textarea_name' => 'editorname',
    'quicktags' => false,
    'tinymce' => array(
        'toolbar1' => 'bold,italic,underline,link,unlink'
    )
);
wp_editor( '', 'editorid', $args );

注意事项

  • 避免在 meta box 中使用 wp_editor() 包含 TinyMCE，除非仅使用 Quicktags，以防止 DOM 移动问题。
  • 在文章编辑屏幕，可使用动作如 'edit_page_form' 来添加额外编辑器。
  • 设置数组的详细描述参考 _WP_Editors::parse_settings() 方法。
  • 从 WordPress 4.8 开始，可通过 JavaScript 直接调用编辑器 API。
📄 原文内容

Renders an editor.

Description

Using this function is the proper way to output all needed components for both TinyMCE and Quicktags.
_WP_Editors should not be used directly. See https://core.trac.wordpress.org/ticket/17144.

NOTE: Once initialized the TinyMCE editor cannot be safely moved in the DOM. For that reason running wp_editor() inside of a meta box is not a good idea unless only Quicktags is used.
On the post edit screen several actions can be used to include additional editors containing TinyMCE: ‘edit_page_form’, ‘edit_form_advanced’ and ‘dbx_post_sidebar’.
See https://core.trac.wordpress.org/ticket/19173 for more information.

See also

Parameters

$contentstringrequired
Initial content for the editor.
$editor_idstringrequired
HTML ID attribute value for the textarea and TinyMCE.
Should not contain square brackets.
$settingsarrayoptional
See _WP_Editors::parse_settings() for description.

Default:array()

Source

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

View all references View on Trac View on GitHub

Uses Description
_WP_Editors::editor()wp-includes/class-wp-editor.php

Outputs the HTML for a single instance of the editor.
Used by Description
wp_comment_reply()wp-admin/includes/template.php

Outputs the in-line comment reply-to form in the Comments list table.
edit_form_image_editor()wp-admin/includes/media.php

Displays the image and editor in the post editor
the_editor()wp-includes/deprecated.php

Displays an editor: TinyMCE, HTML, or both.

Changelog

Version Description
3.3.0 Introduced.

User Contributed Notes

  1. Skip to note 8 content


    M A Vinoth Kumar


    You must log in to vote on the helpfulness of this noteVote results for this note: 9You must log in to vote on the helpfulness of this note

    Get the wp_editor through AJAX Call,

    add_action( 'wp_ajax_bc_ajax_request', 'bc_ajax_request_fn' ); 
function bc_ajax_request_fn(){
$html ='';
$html .= bc_get_wp_editor('Test Message','primary_editor',array());
return $html;
}
    function bc_get_wp_editor( $content = '', $editor_id, $options = array() ) {
	ob_start();

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

	$temp = ob_get_clean();
	$temp .= _WP_Editors::enqueue_scripts();
	$temp .= print_footer_scripts();
	$temp .= _WP_Editors::editor_js();

	return $temp;
}

  2. Skip to note 9 content


    Mário Valney


    You must log in to vote on the helpfulness of this noteVote results for this note: 6You must log in to vote on the helpfulness of this note

    To edit tinymce Visual Buttons, you should use toolbar instead of TinyMCE documentation’s theme_advanced_buttons attribute:

    $args = array(
    'tinymce'       => array(
        'toolbar1'      => 'bold,italic,underline,separator,alignleft,aligncenter,alignright,separator,link,unlink,undo,redo',
        'toolbar2'      => '',
        'toolbar3'      => '',
    ),
);
wp_editor( $content, $editor_id, $args );

  4. Skip to note 11 content


    Codex


    You must log in to vote on the helpfulness of this noteVote results for this note: 3You must log in to vote on the helpfulness of this note

    Modify the editor’s default settings when initializing it
    You can pass an array of one or more settings to modify for this editor instance, such as hiding the insert media buttons.

    $content   = '';
$editor_id = 'mycustomeditor';
$settings  = array( 'media_buttons' => false );

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

  7. Skip to note 14 content


    Mustafa BOŞNAK


    You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note

    Remove HTML button and media button in editor. Create blank content. Define a custom name and id for the editor. Determine your editor’s row count.

    $content = "";
$custom_editor_id = "editorid";
$custom_editor_name = "editorname";
$args = array(
		'media_buttons' => false, // This setting removes the media button.
		'textarea_name' => $custom_editor_name, // Set custom name.
		'textarea_rows' => get_option('default_post_edit_rows', 10), //Determine the number of rows.
		'quicktags' => false, // Remove view as HTML button.
	);
wp_editor( $content, $custom_editor_id, $args );