WordPress函数add_editor_style()，为自定义TinyMCE编辑器样式表添加回调。

用法：

add_editor_style( array|string $stylesheet = ‘editor-style.css’ )

描述：

参数$stylesheet是样式表的名称，相对于主题根目录。它还接受一个样式表数组。它是可选的，默认为’ editor .css ‘。

这个函数会自动添加另一个带-rtl前缀的样式表，例如editor-style-rtl.css。如果该文件不存在，则在向TinyMCE添加样式表之前将其删除。如果一个样式表数组被传递给add_editor_style()， RTL只会被添加到第一个样式表。

从3.4版开始，TinyMCE主体就有了。rtl CSS类。更好的选择是使用这个类并在主样式表中添加任何RTL样式。

参数：

$stylesheet

(array|string) (可选)样式表名称或其数组，相对于主题根。默认为“editor-style.css”

默认值:“editor-style.css”

更多的信息：

允许主题开发人员将自定义样式表文件链接到TinyMCE可视化编辑器。该函数针对当前主题目录测试作为$stylesheet参数给出的相对路径是否存在，并在成功时链接文件。如果没有指定$stylesheet参数，该函数将测试默认编辑器样式表文件是否存在。css文件，并在成功时链接该文件。

如果使用了子主题，则测试当前子主题和父主题目录，如果找到了具有相同相对路径的两个文件，则将它们链接到这个调用中。

要从当前主题目录以外的位置链接样式表文件，比如在你的插件目录下，可以使用附加到mce_css钩子的过滤器。

来源：

文件: wp-includes/theme.php

function add_editor_style( $stylesheet = ‘editor-style.css’ ) {

global $editor_styles;

add_theme_support( ‘editor-style’ );

$editor_styles = (array) $editor_styles;

$stylesheet = (array) $stylesheet;

if ( is_rtl() ) {

$rtl_stylesheet = str_replace( ‘.css’, ‘-rtl.css’, $stylesheet[0] );

$stylesheet[] = $rtl_stylesheet;

}

$editor_styles = array_merge( $editor_styles, $stylesheet );

}

更新日志：

用户贡献的笔记：

（由Codex – 5年前贡献）

基本的例子

将以下内容添加到主题的functions.php文件中。

/**

* Registers an editor stylesheet for the theme.

*/

function wpdocs_theme_add_editor_styles() {

add_editor_style( ‘custom-editor-style.css’ );

}

add_action( ‘admin_init’, ‘wpdocs_theme_add_editor_styles’ );

接下来，在您的主题根目录中创建一个名为custom-editor-style.css的文件。添加到该文件中的任何CSS规则都将反映在TinyMCE可视化编辑器中。文件的内容可能如下所示:

body#tinymce.wp-editor {

font-family: Arial, Helvetica, sans-serif;

margin: 10px;

}

body#tinymce.wp-editor a {

color: #4CA6CF;

}

（由majick贡献- 5年前）

如果你想动态地添加样式(例如。你可以使用tiny_mce_before_init过滤器，并将它们添加到content_style键。

add_filter(‘tiny_mce_before_init’,’wpdocs_theme_editor_dynamic_styles’);

function wpdocs_theme_editor_dynamic_styles( $mceInit ) {

$styles = ‘body.mce-content-body { background-color: #’ . get_theme_mod( ‘background-color’, ‘#FFF’ ) . ‘}’;

if ( isset( $mceInit[‘content_style’] ) ) {

$mceInit[‘content_style’] .= ‘ ‘ . $styles . ‘ ‘;

} else {

$mceInit[‘content_style’] = $styles . ‘ ‘;

}

return $mceInit;

}

注意，任何新行或双引号都应该在CSS中删除或双转义。

（由Codex – 5年前贡献）

使用谷歌字体

谷歌字体API为CSS文件提供了一个单一的URL，该URL可以包含一个字体面的多个变体，用逗号分隔。URL中的逗号需要进行编码，然后才能将字符串传递给add_editor_style。

/**

* Registers an editor stylesheet for the current theme.

*/

function wpdocs_theme_add_editor_styles() {

$font_url = str_replace( ‘,’, ‘%2C’, ‘//fonts.googleapis.com/css?family=Lato:300,400,700’ );

add_editor_style( $font_url );

}

add_action( ‘after_setup_theme’, ‘wpdocs_theme_add_editor_styles’ );

（由Codex – 5年前贡献）

根据帖子类型选择样式

要链接基于正在编辑的帖子类型的自定义编辑器样式表文件，可以在主题的functions.php文件中使用以下方法。这假定以editor-style-{post_type}.css形式命名的样式表文件直接存在于主题目录下。

/**

* Registers an editor stylesheet for the current theme.

*

* @global WP_Post $post Global post object.

*/

function wpdocs_theme_add_editor_styles() {

global $post;

$my_post_type = ‘posttype’;

// New post (init hook).

if ( false !== stristr( $_SERVER[‘REQUEST_URI’], ‘post-new.php’ )

&& ( isset( $_GET[‘post_type’] ) === true && $my_post_type == $_GET[‘post_type’] )

) {

add_editor_style( get_stylesheet_directory_uri() . ‘/css/editor-style-‘ . $my_post_type . ‘.css’ );

}

// Edit post (pre_get_posts hook).

if ( stristr( $_SERVER[‘REQUEST_URI’], ‘post.php’ ) !== false

&& is_object( $post )

&& $my_post_type == get_post_type( $post->ID )

) {

add_editor_style( get_stylesheet_directory_uri() . ‘/css/editor-style-‘ . $my_post_type . ‘.css’ );

}

}

add_action( ‘init’, ‘wpdocs_theme_add_editor_styles’ );

add_action( ‘pre_get_posts’, ‘wpdocs_theme_add_editor_styles’ );

注意，pre_get_posts操作钩子用于确保已经确定了post类型，但同时，TinyMCE还没有配置。这个钩子在创建新的post时不会运行，这就是为什么我们需要将它与init钩子结合使用来实现一致的结果。

（由布拉德·戴维斯贡献- 3年前）

如果你将你的样式文件保存在一个子目录中，例如css，你可以添加编辑器样式:

/**

* Registers an editor stylesheet in a sub-directory.

*/

function add_editor_styles_sub_dir() {

add_editor_style( trailingslashit( get_template_directory_uri() ) . ‘css/editor-style.css’ );

}

add_action( ‘after_setup_theme’, ‘add_editor_styles_sub_dir’ );

（由olik9 – 4年前贡献）

上面的例子可以改写得更简单:

function value( $ar, $key, $default = ” ) {

if ( is_array( $ar ) && isset( $ar[ $key ] ) ) { return $ar[ $key ]; }

//else

return $default;

}

/**

* Registers an editor stylesheet for the current theme.

*

* @global WP_Post $post Global post object.

*/

function wpdocs_theme_add_editor_styles() {

global $pagenow;

global $post;

$my_post_type = ‘posttype’;

if ( ( ( ‘post-new.php’ === $pagenow ) && ( value( $_GET, ‘post_type’ ) == $my_post_type ) ) || // New post (init hook)

( ( ‘post.php’ === $pagenow ) && is_object( $post ) && ( get_post_type( $post->ID ) == $my_post_type ) ) ) { // Edit post (pre_get_posts hook).

add_editor_style( get_stylesheet_directory_uri() . ‘/css/editor-style-‘ . $my_post_type . ‘.css’ );

}

}

add_action( ‘admin_init’, ‘wpdocs_theme_add_editor_styles’ );

add_action( ‘pre_get_posts’, ‘wpdocs_theme_add_editor_styles’ );

（由Codex – 5年前贡献）

重用主题样式

您可以使用@import CSS规则在自定义编辑器样式表文件中重用主题样式表文件中的样式。处理前面的示例，将下列内容放入custom-editor-style.css文件中。

@import url( ‘style.css’ );

/* Add overwrites as needed so that the content of the editor field is attractive and not broken */

body { padding: 0; background: #fff; }

如有必要，改变“风格”。到你的主题样式表的路径，相对于custom-editor style.css文件。