文件结构

本节展示每个 TinyMCE skin 所需的文件。所示文件路径相对于根 TinyMCE 包目录（tinymce.min.js 所在位置）。例如：

./
├── icons/
├── langs/
├── license.txt
├── models/
├── plugins/
├── readme.txt
├── skins/
├── themes/
├── tinymce.d.ts
├── tinymce.js
├── tinymce.min.js
└── version.txt

下表展示用于捆绑以下 skin 的语法示例：

示例 skin 所需文件：

./skins/ui/example/content.css
./skins/ui/example/skin.css

示例 skin 可选文件：

/* 仅内联编辑器需要 */
./skins/ui/example/content.inline.css

在捆绑中包含示例图标包的语法示例：

各捆绑工具对 content CSS 文件（例如 content.css 或 content.min.css）的处理方式不同。请在 使用模块加载器捆绑 TinyMCE 中查看相关指南，了解所需语法。

开源 skin

默认 skin (oxide)
./skins/ui/oxide/content.css
./skins/ui/oxide/content.inline.css
./skins/ui/oxide/skin.css
./skins/ui/oxide/skin.shadowdom.css
深色 skin (oxide-dark)
./skins/ui/oxide-dark/content.css
./skins/ui/oxide-dark/content.inline.css
./skins/ui/oxide-dark/skin.css
./skins/ui/oxide-dark/skin.shadowdom.css
TinyMCE 5 skin (tinymce-5)
./skins/ui/tinymce-5/content.css
./skins/ui/tinymce-5/content.inline.css
./skins/ui/tinymce-5/skin.css
./skins/ui/tinymce-5/skin.shadowdom.css
TinyMCE 5 深色 skin (tinymce-5-dark)
./skins/ui/tinymce-5-dark/content.css
./skins/ui/tinymce-5-dark/content.inline.css
./skins/ui/tinymce-5-dark/skin.css
./skins/ui/tinymce-5-dark/skin.shadowdom.css

Enhanced Skins

有关 Enhanced editor skins 的信息，请参阅：Enhanced Skins & Icon Packs。

Bootstrap skin
./skins/ui/bootstrap/content.css
./skins/ui/bootstrap/content.inline.css
./skins/ui/bootstrap/skin.css
./skins/ui/bootstrap/skin.shadowdom.css
Borderless skin
./skins/ui/borderless/content.css
./skins/ui/borderless/content.inline.css
./skins/ui/borderless/skin.css
./skins/ui/borderless/skin.shadowdom.css
Fabric skin
./skins/ui/fabric/content.css
./skins/ui/fabric/content.inline.css
./skins/ui/fabric/skin.css
./skins/ui/fabric/skin.shadowdom.css
Fluent skin
./skins/ui/fluent/content.css
./skins/ui/fluent/content.inline.css
./skins/ui/fluent/skin.css
./skins/ui/fluent/skin.shadowdom.css
Jam skin
./skins/ui/jam/content.css
./skins/ui/jam/content.inline.css
./skins/ui/jam/skin.css
./skins/ui/jam/skin.shadowdom.css
Material (Classic) skin
./skins/ui/material-classic/content.css
./skins/ui/material-classic/content.inline.css
./skins/ui/material-classic/skin.css
./skins/ui/material-classic/skin.shadowdom.css
Material (Outline) skin
./skins/ui/material-outline/content.css
./skins/ui/material-outline/content.inline.css
./skins/ui/material-outline/skin.css
./skins/ui/material-outline/skin.shadowdom.css
Naked skin
./skins/ui/naked/content.css
./skins/ui/naked/content.inline.css
./skins/ui/naked/skin.css
./skins/ui/naked/skin.shadowdom.css
Outside skin
./skins/ui/outside/content.css
./skins/ui/outside/content.inline.css
./skins/ui/outside/skin.css
./skins/ui/outside/skin.shadowdom.css
Small skin
./skins/ui/small/content.css
./skins/ui/small/content.inline.css
./skins/ui/small/skin.css
./skins/ui/small/skin.shadowdom.css
Snow skin
./skins/ui/snow/content.css
./skins/ui/snow/content.inline.css
./skins/ui/snow/skin.css
./skins/ui/snow/skin.shadowdom.css

来自 tinymce-premium（NPM）的 Premium skin

tinymce-premium NPM 包在 tinymce-premium/skins/ 中发布所有 premium skin。根据 TinyMCE 的部署方式，选择以下模式之一：

捆绑（推荐用于现代构建工具）

  • 导入所需 skin 文件，以便模块 bundler 将其加入应用 bundle。例如，导入默认 skin（oxide）：

    import 'tinymce-premium/skins/ui/oxide/skin.css';
import contentUiSkinCss from 'tinymce-premium/skins/ui/oxide/content.css';
// ... 其他 TinyMCE 导入

  • 完成捆绑后，在编辑器配置中设置 skin: false 与 content_css: false，然后使用 content_style 注入已捆绑的 CSS。

不捆绑（文件层叠加）

  • 当直接从 node_modules 托管时，将 node_modules/tinymce-premium/skins/ 复制到 node_modules/tinymce/skins/ 作为构建或部署步骤的一部分（例如在 postinstall 脚本中）。

  • 复制完成后，premium skin 将位于核心文件旁边，因此设置 skin 即可生效，无需额外配置。

不捆绑（使用 skin_url）

  • 将 premium skin 保留在 node_modules/tinymce-premium/skins/ 中，并配置 skin_url 指向所需 skin 目录。

  • 此方式无需移动文件；当 node_modules 目录可通过网络访问（或仅将特定 skin 复制到 public 文件夹）时非常有用。