修改 WordPress 经典编辑器 (WordPress Classic Editor, TinyMCE) 的 CSS, 和前端字体样式保持一致

发表 admin at 2025年9月25日

类别

文章

标签

WordPress 经典编辑器 (WordPress Classic Editor)

在 WordPress Classic 编辑器中，编辑器内显示的字体默认使用 user agent stylesheet（浏览器默认样式），而前台页面使用 WordPress 主题样式，这导致在Classic 编辑器中字体的显示与前台页面差异较大。尤其是标题标签（Heading Tags）的字体大小和字重与前台页面对照时，可能看起来较为混乱。

Classic编辑器本质是一个嵌入在WordPress后台文章编辑页面中的独立iframe，其内容通过TinyMCE（一个基于浏览器的富文本编辑器）渲染，样式由TinyMCE的CSS文件控制。
前台页面的样式由主题的CSS文件（如style.css）控制。

CSS 样式的隔离性

父页面CSS不影响iframe内部：iframe作为独立文档，其内部样式默认与父页面隔离。例如，父页面的全局样式（如body背景色）不会直接作用于iframe内的元素，这是浏览器的安全设计（如Chrome、Firefox等均遵循此规则）。
iframe样式不影响父页面：iframe内部的CSS仅限自身文档，不会外溢到父页面。例如，iframe内定义的h1样式不会改变父页面h1的显示效果。

自定义`TinyMCE`的字体样式

这里，我们借助于WordPress 插件 Advanced TinyMCE Configuration，引用自定义 CSS 文件。首先，在 WordPress 的 /wp-content/uploads/ 目录下，创建 tinymce/css 目录，然后在其下创建一个 custom.css 文件，内容按需要编写：示例：

https://www.example.com/wp-content/uploads/tinymce/css/custom.css

/*
TinyMCE Custom CSS
*/

/* TinyMCE 整体字体 */
body#tinymce {
    font-family: system-ui, sans-serif;
    color: #3c3c3c;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: 0px;
}

/* TinyMCE 预格式化和代码字体 */
#tinymce code, #tinymce pre, #tinymce q {
    font-family: Consolas, monospace !important;
}

/*预格式化*/
#tinymce pre {
    color: #3c3c3c;
    background: #f2f2f2;
    border-radius: 8px;
    border: solid 1px #ebebeb;
    line-height: 1.43 !important;
}

/*代码换行*/
#tinymce code, #tinymce q {
    white-space: pre-wrap;
    padding: 2px 4px;
    margin: 0px;
    border: 0px;
    border-radius: 6px;
    color: #ff0060;
    background-color: #f2f2f2;
}

/*预格式化下的代码文本*/
#tinymce pre code {
    white-space: pre-wrap;
    padding: 0px;
    margin: 0px;
    border: 0px;
    color: #ff0060;
    background: transparent;
}

/* TinyMCE 标题字体 */
#tinymce h1 {
    font-size: 32px;
    line-height: 38px;
    font-weight: 700;
    letter-spacing: 0px
}

#tinymce h2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: 0px
}

#tinymce h3 {
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    letter-spacing: 0px
}

#tinymce h4 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: 0px
}

#tinymce h5 {
    font-size: 18px;
    line-height: 29px;
    font-weight: 500;
    letter-spacing: 0px
}

#tinymce h6 {
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: 0px
}

然后，在 Advanced TinyMCE Configuration 插件的设置页面中，找到 Defaults > Show the default TinyMCE settings 并点击。在content_css中，可以看到TinyMCE当前引用的 CSS 文件：示例：

https://www.example.com/wp-includes/css/dashicons.min.css?ver=6.8.2,https://www.example.com/wp-includes/js/tinymce/skins/wordpress/wp-content.css?ver=6.8.2

点击 Edit，然后在 Edit options 下可以看到 Name / Value 的编辑框，Name 为 content_css ，在 Value 中增加上文创建的 CSS 文件路径：示例：

https://www.example.com/wp-includes/css/dashicons.min.css?ver=6.8.2,https://www.example.com/wp-includes/js/tinymce/skins/wordpress/wp-content.css?ver=6.8.2,https://www.example.com/wp-content/uploads/tinymce/css/custom.css

然后点击 Save Changes 保存即可。完成之后，在 WordPress 的 Classic 编辑器中，即可看到引用的自定义 CSS 文件已经生效。

WordPress 经典编辑器 (WordPress Classic Editor)

CSS 样式的隔离性

自定义TinyMCE的字体样式

自定义`TinyMCE`的字体样式