增强型皮肤与图标包

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

增强版皮肤仅随付费 TinyMCE 订阅提供。

增强版皮肤和图标包提供预制的皮肤和图标包，可快速自定义 TinyMCE 的外观。这些高级选项允许集成人员将 TinyMCE 与其应用程序的设计系统相匹配。

可用的高级皮肤

TinyMCE 可用以下高级皮肤：

有关配置皮肤的信息，请参阅：皮肤选项。

皮肤可包含 UI 样式（skin.css）和内容样式（content.css）。使用 skin 选项时，若两个文件都存在，则会同时自动应用它们。

若仅对可编辑区域进行样式设置（不更改 UI），可使用独立的内容专用 CSS 文件。这些文件位于内容文件夹中，可能与皮肤所包含的内容样式不同。可用的内容专用选项：

使用 content_css 选项应用内容专用样式。

tinymce.init({
  selector: 'textarea',
  skin: 'fabric'  // 同时应用 UI 和内容样式（若两个文件都包含）
});

skin 选项要求皮肤文件位于默认位置（TINYMCE_BASE/skins/ui/${skinName}）。有关自定义位置或使用不带打包的 NPM 包的信息，请参阅皮肤选项。

混合使用皮肤和 content_css：
当使用包含内容样式的皮肤时，无需 content_css 选项。但是，若同时指定了 skin 和 content_css，content_css 将覆盖皮肤的内容样式，从而允许混合搭配 UI 和内容样式。

TinyMCE 可用以下高级图标包：

有关配置图标包的信息，请参阅：图标选项。

tinymce.init({
  selector: 'textarea',
  icons: 'material'      // 图标包名称
});

icons 选项要求图标包文件位于默认位置（TINYMCE_BASE/icons/${iconPackName}/icons.js）。有关自定义位置或使用不带打包的 NPM 包的信息，请参阅图标选项。

由于工具栏按钮大小不同，某些图标包与某些皮肤的适配性更佳。请使用以下兼容性矩阵作为选择组合的指南。

皮肤	兼容的图标包
material-classic	bootstrap, material, jam, small, thin
material-outline	bootstrap, material, jam, small, thin
bootstrap	bootstrap, material, jam, small, thin
fabric	bootstrap, material, jam, small, thin
fluent	bootstrap, material, jam, small, thin
borderless	bootstrap, material, jam, small, thin
naked	bootstrap, material, jam, small, thin
outside	bootstrap, material, jam, small, thin
snow	bootstrap, material, jam, small, thin
small	jam, small
jam	jam, small

以下是展示皮肤与图标包推荐组合的交互式演示：