云策 WordPress 开发者社区

钩子文档

mce_css

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

概述

mce_css 是一个 WordPress 过滤器，用于修改 TinyMCE 编辑器加载的样式表列表。它接受逗号分隔的样式表字符串作为参数，允许开发者添加或调整编辑器样式。

关键要点

  • mce_css 过滤器用于过滤 TinyMCE 加载的样式表列表，参数为逗号分隔的字符串。
  • 在主题中，建议优先使用 add_editor_style() 函数来添加编辑器样式。
  • 过滤器在 WordPress 2.1.0 版本中引入，常用于插件或自定义开发中。
  • 使用示例包括添加插件样式表或 Google Fonts，需注意 URL 编码处理。

代码示例

add_filter( 'mce_css', 'plugin_mce_css' );

function plugin_mce_css( $mce_css ) {
    if ( ! empty( $mce_css ) )
        $mce_css .= ',';

    $mce_css .= plugins_url( 'editor.css', __FILE__ );

    return $mce_css;
}

注意事项

  • 当添加包含多个字体的 Google Fonts 样式表时，需将 URL 中的逗号替换为 URL 编码的 '%2C'，以避免解析错误。
📄 原文内容

Filters the comma-delimited list of stylesheets to load in TinyMCE.

Parameters

$stylesheetsstring
Comma-delimited list of stylesheets.

More Information

If you are doing this from within a theme, consider using add_editor_style() instead.

Source

$mce_css = trim( apply_filters( 'mce_css', $mce_css ), ' ,' );

View all references View on Trac View on GitHub

Used by Description
_WP_Editors::editor_settings()wp-includes/class-wp-editor.php

Changelog

Version Description
2.1.0 Introduced.

User Contributed Notes

  2. Skip to note 4 content


    Steven Lin


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

    Example Migrated from Codex:

    Add a Google Fonts CSS stylesheet.

    Because mce_css is a comma-separated string of values, you cannot use the default href string from a source like Google Fonts if it contains multiple faces (e.g., ‘http://fonts.googleapis.com/css?family=Lato:300,400,700’). You must replace the commas with their URL-encoded equivalent, ‘%2C’.

    add_filter( 'mce_css', 'plugin_mce_css' );

function plugin_mce_css( $mce_css ) {
	if ( ! empty( $mce_css ) )
		$mce_css .= ',';

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

	return $mce_css;
}