本指南概述了如何将 TinyMCE 与 Webpack、Vite、Rollup 或 Browserify 等模块打包工具一起使用。有关特定打包工具的设置说明，请参阅 TinyMCE 打包简介。

使用 Tiny Cloud 时，依赖项和额外资源会自动加载。以下信息适用于使用 NPM 或 ZIP 包的自托管安装。本指南中的所有示例均使用 NPM 包导入路径。

模块语法支持

TinyMCE 支持 ES6 模块和 CommonJS 模块：

  • ES6 模块：使用 import 语句（所有文档示例中均采用这种方式）

  • CommonJS 模块：使用 require() 语句

两种语法都受支持，但本文档在所有示例中均使用 ES6 模块语法。

必需的导入

示例：基本推荐的导入

/* 导入 TinyMCE */
import tinymce from 'tinymce';

/* 默认图标是必需的 */
import 'tinymce/icons/default';

/* 必需的 TinyMCE 组件 */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* 导入一个皮肤（oxide 是默认皮肤） */
import 'tinymce/skins/ui/oxide/skin.js';
import 'tinymce/skins/ui/oxide/content.js';

/* 用于编辑器内容样式设置的内容 CSS */
import 'tinymce/skins/content/default/content.js';

有关以下方面的更多信息：

导入插件

大多数插件都可以直接通过其插件代码导入。导入路径取决于插件是开源插件还是高级插件：

开源插件

import 'tinymce/plugins/<plugincode>';

高级插件

import 'tinymce-premium/plugins/<plugincode>';

当使用具有商业许可证的高级插件时，必须包含 licensekeymanager 插件：

import 'tinymce-premium/plugins/licensekeymanager';

有关更多信息，请参阅 使用高级插件。

有关打包插件的详细信息，请参阅 打包插件。

插件注意事项

某些插件需要额外的资源文件（JS、CSS 或语言文件）才能正常工作。在打包时必须显式导入这些文件：

需要额外资源的插件

  • Emoticons（表情符号）：需要表情符号数据库文件（js/emojis.js）

  • Help（帮助）：需要键盘导航语言文件（js/i18n/keynav/<lang>.js）

  • Autocorrect（自动更正）：需要单词列表文件（js/en.js）

  • Uploadcare：需要 webcomponent 文件（js/uc-video.js）

有关特定导入示例，请参阅 额外的插件资源。

插件依赖项

某些插件依赖于其他插件。例如：

  • advtable 插件需要 table 插件

始终先导入依赖项插件，再导入需要它们的插件。有关插件依赖项的完整列表，请参阅每个插件的文档页面。

CSS 文件

某些插件需要额外的 CSS 文件。通过插件的 JS 文件导入插件时，会自动包含插件的 CSS 文件。

使用皮肤时，必须同时导入：

  • 皮肤 CSS 文件（skin.css 或 skin.js）

  • 内容皮肤 CSS 文件（content.css 或 content.js）

导入 skin.js 和 content.js 文件是除 CSS 导入之外加载皮肤样式的另一种方式。对于像 Webpack 和 Browserify 这样需要额外设置才能支持 CSS 导入的打包工具，打包皮肤中的 CSS 示例仍然有效。

有关更多信息，请参阅 打包皮肤。

语言文件

语言文件是可选的，用于本地化 TinyMCE UI 和插件界面。

核心 UI 语言文件

对于开源包：

import 'tinymce/langs/<language>.js';

对于高级包：

import 'tinymce-premium/langs/<language>.js';

插件语言文件

插件语言文件与主要的 UI 语言文件是分开的。必须将编辑器的 language 选项设置为所需的语言，插件的语言文件才能生效。

// Open source plugin language file
import 'tinymce/plugins/<plugincode>/langs/<language>.js';

// Premium plugin language file
import 'tinymce-premium/plugins/<plugincode>/langs/<language>.js';

  • 美国英语是默认语言，因此语言包不包含 en.js 语言文件（参见language 选项）。请注意，Help 和 Autocorrect 插件有自己的 en.js 文件。

  • 示例中包含 .js 扩展名以便清晰；大多数 bundlers 可以自动解析文件扩展名。

欲了解更多信息，请参阅 UI localizations。

下一步