当前浏览:首页 / WordPress函数 / add_editor_style()

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

为自定义TinyMCE编辑器样式表添加回调

addmore...

style


描述

参数$stylesheet是相对于主题根目录的样式表名称。它还接受样式表数组。它是可选的,默认为“editor-style.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参数,该函数将针对当前主题目录检测默认编辑器样式表文件editor-style.css,并在成功时链接该文件。

如果使用子主题,则会检测当前的子主题目录和父主题目录,如果找到具有相同相对路径的两个文件,则会使用此调用链接它们。

要从当前主题目录以外的位置(例如插件目录下)链接样式表文件,请使用附加到mce_css挂钩的过滤器。



源码

查看源码 官方文档


更新日志

版本描述
3.0.0开始引入

用户贡献的笔记

  • 贡献者:Codexeclev91

    基本示例

    将以下内容添加到主题的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

    如果要动态添加样式(例如来自主题mods),可以使用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中删除或双转义。

  • 贡献者:Code Muffin

    #古腾堡

    这对古腾堡有效。您的CSS将作为内联样式添加。所有选择器的前缀均为:
    .editor-styles-wrapper(除body,见下文)。

    下面的所有信息都与Gutenberg使用此函数有关。

    # Body 样式

    针对body的样式将被改为针对.editor-styles-wrapper。这使您可以直接自定义Gutenberg编辑器窗格,例如更改其padding。还可以通过向body类添加样式来设置默认值(如字体系列、颜色等)。

    例如:body { color: red }变成.editor-styles-wrapper { color: red }

    #CSS重置

    如果对前端和编辑器样式使用相同的样式表,请小心使用CSS重置。它将影响编辑器中的所有元素,包括块的管理控件 ─ 例如经典块中的TinyMCE GUI按钮或编辑模式下的ACF块字段。

    您可能更喜欢移动主样式的重置,并将其独立地引入在前端,可能需要为编辑器专门定制重置。

    #使用@import

    我看到开发人员报告说,在CSS中使用@import会导致问题。如果发生这种情况,最好通过其他方式添加导入的文件,或者将其作为add_editor_style中的附加数组项,或者将它作为管理样式仅在编辑器页面上排队(请参阅使用$pagenow的其他用户说明)。

    #本地开发+SSL

    如果您在本地工作,请注意,如果您使用带有自签名证书的HTTPS,则使用绝对URL(例如通过get_template_directory_uri)将不起作用。这是因为wp_remote_get被用于检索样式表,如果请求的URL证书未包含在WordPress允许证书的内部存储中,则样式表将失败(静默)。

    解决方法包括:使用相对于主题根的路径(理想),使用绝对HTTP URL而不是HTTPS,以及禁用https_ssl_verify的SSL验证(出于安全原因,不推荐)。

    #代码上下文

    检索样式的代码使用wp_remote_get表示绝对URL,或file_get_contents用于与主题根相关的文件。您可以在block-editor.php中找到这段代码,在函数get_block_editor_theme_styles()处。它是从edit form blocks.php调用的。

  • 贡献者:Codex

    使用谷歌字体

    Google字体API为CSS文件提供了一个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

    根据文章类型选择样式

    要根据正在编辑的文章类型链接自定义编辑器样式表文件,可以在主题的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。创建新文章时不会运行该钩子,这就是为什么我们需要将其与init钩子结合使用以获得一致的结果。

  • 贡献者:Brad Davis

    如果将样式文件保存在子目录(例如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

    可以更简单地改写上述示例:

    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

    重复使用主题样式

    您可以使用@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; } 
    

    如有必要,改变“style.css”指向主题样式表的路径,相对于custom-editor-style.css文件。