自定义用户界面-TinyMCE 中文手册-果果开发

本节介绍如何使用主题、工具栏按钮自定义 TinyMCE 的用户界面，以及如何操作状态栏。

主题

Silver 是 TinyMCE 的默认主题。用户可以轻松自定义菜单或工具栏，而无需编辑主题本身。创建主题需要更深入地了解 TinyMCE 的 API，超出了本指南的范围。不过，制作 TinyMCE 皮肤则相对容易。

皮肤

皮肤控制 TinyMCE 的外观，例如颜色和间距。默认皮肤名为 Oxide (oxide)，并提供 light 和 dark 两个版本。要使用默认皮肤的深色版本初始化编辑器，请使用以下配置：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  skin: 'oxide-dark',
  content_css: 'dark'
});

若要基于用户在操作系统中指定的偏好来设置皮肤版本，请使用：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  skin: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'oxide-dark' : 'oxide'),
  content_css: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default')
});

有关手动为 TinyMCE 创建皮肤的详细信息，请参阅 Creating a skin。

开发人员经常混淆 TinyMCE“主题”与“皮肤”的区别。Skin（皮肤）在 TinyMCE 中用于更改编辑器的外观，例如颜色、边距、内边距、字体、图标等。Theme（主题）则构建编辑器的结构（编辑区域的左侧、顶部、底部或右侧 - 垂直或水平、行内或外部等）。皮肤通常更改按钮、对话框等的配色方案，而主题应用于整个编辑器（包括其功能），并包含子皮肤以更改外观。

更改编辑器高度和宽度

开发人员常用的 UI 自定义方式是更改可编辑区域的高度和宽度。以下示例是更改 TinyMCE 高度和宽度的代码片段。

下方链接包含这些自定义选项的具体详情。

设置可编辑区域高度

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  height: 300
});

有关自定义详情，请参阅 height option。

设置可编辑区域宽度

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  width: 300
});

有关自定义详情，请参阅 width option。

设置最大和最小高度及宽度

以下代码片段使用了多个选项来设置可编辑区域高度的最大值和最小值以及宽度的最大值和最小值。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_height: 500,
  max_width: 500,
  min_height: 100,
  min_width: 400
});

请参阅 max_height、max_width、min_height 和 min_width 文档页面，了解更多关于这些自定义选项的信息。

通过 resize 配置选项，可编辑区域还可以随着用户向 iframe 输入内容而自动调整大小。

使用 content_css 自定义可编辑区域

使用 content_css 自定义选项，确保 TinyMCE 的可编辑区域具有与周围内容相同的样式。

TinyMCE 附带六个内容 CSS 文件：

default
dark
document
writer
tinymce-5
tinymce-5-dark

可以使用 content_css 配置选项在编辑器中启用这些内容 CSS 文件。

例如：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'writer'
});

这些内容 CSS 文件也可用作模板，用于为编辑器创建自定义内容 CSS 文件。有关 CSS 文件，请参阅：tinymce-dist GitHub Repository - Content CSS files。

Tiny 还提供了增强型皮肤的内容 CSS 文件，有关高级内容 CSS 文件的列表，请参阅：Enhanced Skins & Icon Packs。

Tiny 建议使用相同的 CSS 同时用于编辑器和将渲染编辑器内容的页面。

以下示例在所有页面中包含 mycontent.css 文件，以控制站点的整体外观。此示例确保可编辑区域中的内容与站点具有相同的样式。

使用绝对路径的示例

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: '/mycontent.css'  // resolved to http://domain.mine/mycontent.css
});

有关使用绝对路径和相对路径以及如何使用多个样式表的更多信息，请参阅 content_css 自定义页面。

隐藏状态栏

状态栏是与编辑器可编辑区域底部对齐的灰色条。状态栏包含路径信息和调整大小手柄。移除状态栏将禁用用户更改可编辑区域大小的能力。

示例：隐藏状态栏

以下示例禁用状态栏。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  statusbar: false
});

有关如何限制是否可拖动调整大小手柄的更多信息，请参阅插件和高级配置选项文档。

添加代码按钮插件

一个流行的工具栏按钮未随"Silver"主题加载，即 code 按钮。点击 code 按钮会显示一个对话框，其中包含隐藏在 TinyMCE 界面背后的原始 HTML。

额外功能可能需要包含插件

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'code',
  toolbar: 'code'
});

将 code 按钮添加到工具栏后，所有按钮都会消失，并创建一个名为 Tools 的新菜单，其中包含菜单项 Source code。（有关基本 HTML 代码块，请参阅 this page。）

示例：添加代码工具栏按钮

以下示例除了 code 功能外，还显示默认工具栏：

tinymce.init({
  selector: 'textarea',
  toolbar: 'undo redo styles bold italic alignleft aligncenter alignright outdent indent code',
  plugins: 'code'
});

开源推广

`promotion`

TinyMCE 的开源版本包含针对付费功能的推广信息。可以通过 promotion 选项开启或关闭此推广。

类型： Boolean

默认值： 在社区自托管实例中为 true；否则为 false。

可能值： true, false

示例：使用开源 promotion

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  promotion: true
});

云推广

`onboarding`

TinyMCE 的云版本包含针对付费功能的推广信息，这些功能包含在 14 天试用期内。可以通过 onboarding 选项开启或关闭此推广。

试用期结束后，推广信息将自动消失。

类型： Boolean

默认值： 对于云实例为 true；否则为 false。

可能值： true, false

示例：使用云 onboarding

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  onboarding: false
});

自定义用户界面的能力是确保集成且完整用户体验的重要组成部分。