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

使用示例

• 示例1

  基本示例

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

• 示例2

  如果要动态添加样式（例如来自主题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中删除或双转义。

• 示例3

  #古腾堡

  这对古腾堡有效。您的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调用的。

• 示例4

  使用谷歌字体

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

• 示例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。创建新文章时不会运行该钩子，这就是为什么我们需要将其与init钩子结合使用以获得一致的结果。

• 示例6

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

• 示例7

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

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

• 示例8

  重复使用主题样式

  您可以使用@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文件。