TinyMCE 自带多个高级皮肤，这些皮肤会改变编辑器的外观。这些皮肤是一种简单的方法，可以将 TinyMCE 重新样式化，以更好地适应应用程序。

皮肤与内容 CSS：

皮肤会改变 TinyMCE 的 UI 和可编辑区域（当皮肤包含 skin.css 和 content.css 文件时）的外观。content_css 选项仅对可编辑区域进行样式设置。如果同时使用 skin 和 content_css，content_css 将覆盖皮肤的内容样式，允许混合和匹配 UI 和内容样式。

默认皮肤不需要任何配置，但在打包部署时必须导入：例如：

import 'tinymce/skins/ui/oxide/skin';

替换默认皮肤使用 skin 和 skin_url 设置。

可用皮肤

请查看 Enhanced Skins & Icon Packs 获取可用皮肤列表以及与每个皮肤搭配效果最佳的图标包。

自定义皮肤

集成人员可以创建并使用自己的皮肤文件。有关创建自定义皮肤的信息，请参见：为 TinyMCE 创建一个皮肤。

替换默认皮肤

有两种选项可以替换默认的 TinyMCE 皮肤：

  • 当皮肤文件位于默认位置时（对于 Tiny Cloud 部署、ZIP 包，或使用 NPM 包进行打包或文件分层时），使用 skin 选项。

  • 使用 skin_url 选项指定皮肤文件的自定义路径，这对于自定义皮肤或使用未打包的 NPM 包非常有用。使用 skin_url 时，不需要 skin 选项。

TinyMCE 尝试加载皮肤文件的默认位置是 TINYMCE_BASE/skins/ui/${skinName}；其中：

  • TINYMCE_BASE 是 TinyMCE 根目录（包含 tinymce.min.js 的目录）。

  • ${skinName} 是皮肤的名称。

要从其他位置加载皮肤，集成人员必须使用 skin_url 指定该位置。

  • 当使用来自 Tiny Cloud、ZIP 包或使用打包或文件分层的 NPM 包中的 TinyMCE 时，使用 skin。

  • 当使用自定义皮肤或未打包的 NPM 包时，使用 skin_url。

理解皮肤文件夹结构：

在 tinymce-premium NPM 包和 ZIP 包中，skins 文件夹包含 ui 文件夹和 content 文件夹。ui 文件夹中的皮肤可以包括 skin.css（用于 UI 样式）和 content.css（用于可编辑区域样式）。当一个皮肤包含这两个文件时，使用 skin 选项将应用 UI 和内容样式。content 文件夹中的文件也可以与 content_css 选项一起独立使用，仅对可编辑区域进行样式设置。

同时使用皮肤和 content_css：

包含 skin.css 和 content.css 文件的皮肤将对 UI 和可编辑区域进行样式设置。使用此类皮肤时不需要 content_css 选项。但是，如果同时指定了 skin 和 content_css，content_css 将覆盖皮肤的内容样式，允许混合和匹配 UI 和内容样式。

skin

此选项指定 TinyMCE 应使用的皮肤，或 false 以不加载皮肤。TinyMCE 附带的默认皮肤名为 "oxide"。

类型： String 或 Boolean

默认值： 'oxide'

可能值： 皮肤名称或 false

皮肤名称应与 TinyMCE 的 skins/ui 目录中的文件夹名称匹配。如果未找到指定的皮肤，TinyMCE 将不会加载。

示例：使用 skin

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  skin: 'fabric'
});

有关创建自定义皮肤的信息，请参见：为 TinyMCE 创建一个皮肤。

skin_url

此选项指定皮肤目录的位置。当从不同位置加载 TinyMCE 和皮肤文件时非常有用。

使用 skin_url 时，不需要 skin 选项。skin_url 选项直接指向皮肤目录位置。

类型： String

示例：使用 skin_url

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  skin_url: '/css/mytinymceskin' // change this to point to the folder of skin files
});

示例：从 tinymce-premium (NPM) 加载高级皮肤

配置 skin_url 以指向适当的位置。例如：

tinymce.init({
  selector: 'textarea',
  skin_url: '/<path_to_premium_skins>/ui/fabric'
});

  • 确保皮肤目录可供应用程序访问。许多项目会在构建步骤中将所需的皮肤复制到静态资源文件夹（如 /public/skins/ui/oxide）中。

  • 将此方法与 Premium skins from tinymce-premium 中列出的方法相结合，以匹配部署策略。