创建主题

最后更新：2026-11-04 10:10:15

本指南介绍如何手动创建新皮肤以自定义 TinyMCE 8 的外观。

前置条件

开始之前，请确保：

熟悉命令行和基本命令。
已安装 Node.js 和 Bun。
需要掌握构建皮肤所使用的 CSS 预处理器 Less 的基础知识。具体而言，请复习变量部分。

准备工作

与主题关联的 CSS 称为皮肤。TinyMCE 8 的默认皮肤是 Oxide，使用 Less 编写。Oxide 引入了 Style API，该 API 包含约 300 个变量，允许在不修改底层 CSS 的情况下自定义 TinyMCE。这种方法确保了与未来更新的兼容性，并提供了持续的错误修复支持。

Tiny 建议不要直接修改或覆盖 CSS 规则。

按照以下步骤设置皮肤开发环境：

下载（或 git clone）TinyMCE 源代码。
打开终端并导航至刚下载的文件夹。
使用以下命令安装依赖项并构建项目：
```
bun install && bun run dev && bun run build
```
启动开发服务器以预览皮肤：
```
bun oxide-start
```
服务器启动后，打开浏览器并导航到显示的 URL，通常是 http://localhost:4000。

现在开发环境已设置完成，界面应类似于以下内容：

如果需要在不启动 Web 服务器的情况下修改皮肤，请运行 bun oxide-build 而不是 bun oxide-start。

创建或编辑皮肤

在继续操作之前，请确保已完成准备工作步骤。

目录结构

导航至 modules/oxide/src/less/skins/。此文件夹包含：

/ui：包含编辑器 UI 皮肤。其中的主文件是 skin.less。
/content：包含编辑器内部内容的皮肤。

modules/oxide/src/less/theme/ 文件夹包含定义全局样式的 Less 文件。大多数文件在顶部列出了可用变量，例如颜色、边距和字体。变量以 @ 为前缀（例如 @background-color）。

请勿直接编辑这些文件。相反，请在创建自定义皮肤时将其作为参考。首先查看：
modules/oxide/src/less/theme/globals/global-variables.less
modules/oxide/src/less/theme/components/toolbar-button/toolbar-button.less
典型的工作流程是将主题文件夹中的变量复制到皮肤的 skin.less 文件中，并根据需要进行修改。
Split buttons 在 TinyMCE 8 中经历了结构变更。以前它们使用单个组件结构，但现在主按钮和箭头区域使用单独的组件。请参阅 split button css breaking change

皮肤仅影响 UI 的视觉外观。元素定位由 TinyMCE 的 UI 框架管理。

创建皮肤

复制 modules/oxide/src/less/skins/ui/ 中的 default 文件夹并重命名。
运行以下命令重新构建项目以识别新创建的皮肤：
```
bun run build
```
运行以下命令启动开发服务器：
```
bun oxide-start
```
如果服务器已经在运行，请重启它（Ctrl+C）并再次运行该命令。
打开 modules/oxide/src/less/skin/ui/<your-skin-name>/skin.less。
从主题文件夹打开一个 Less 文件（例如 modules/oxide/src/less/theme/globals/global-variables.less）并复制一个变量进行修改。例如：
```
@background-color: red;
```

将该变量粘贴到 skin.less 文件中。

更新后的 skin.less 应如下所示：

@import 'src/less/theme/theme';//// Place your variables here//@background-color: red;

保存文件并在浏览器中检查更改。从 Skin menu 中选择皮肤。
编辑器现在应以红色背景显示。

此方法允许通过修改预定义变量（如工具栏间距或字母间距）来自定义 TinyMCE。

在 modules/oxide/src/demo/index.html 中调整 TinyMCE 配置以匹配特定用例。

创建内容 CSS 文件

要修改编辑器内部内容的外观（例如标题、列表、引用），请创建一个内容 CSS 文件：

在 modules/oxide/src/less/skins/content/ 中创建一个文件夹并添加一个 content.less 文件。或者，复制现有的内容 CSS 文件。
重新构建项目以识别新创建的内容皮肤。
```
bun run build
```
启动开发服务器：
```
bun oxide-start
```
如果服务器已经在运行，请重启它（Ctrl+C）并再次运行该命令。
为相关元素（h1 到 h6、a、blockquote、code、table 等）添加样式。例如：
```
h1 {
  color: red;
}
```
保存文件并在浏览器中检查更改。
编辑器现在应以红色标题显示。

将皮肤移至 TinyMCE

将皮肤和/或内容 CSS 从 modules/oxide/build/skins/ 复制到生产 TinyMCE 设置中的相应文件夹。
更新 TinyMCE 的初始化选项：
- 对于 UI 皮肤，使用 skin 选项。
- 对于内容样式，使用 content_css 选项。

有关指定皮肤文件位置的详细信息，请参阅此部分。

修改图标

有关添加自定义图标的详细信息，请参阅：Create an Icon Pack for TinyMCE。