WordPress函数add_editor_style()
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文件。
