插件

概述

TinyMCE插件可以使用模块打包工具如Webpack、Rollup或Vite进行打包。本指南介绍如何在应用程序包中包含开源和付费插件。

TinyMCE包含开源和付费插件：

• 开源插件：随所有TinyMCE安装一起提供

• 付费插件：通过tinymce-premium包提供，适用于付费TinyMCE订阅

文件结构

本节显示每个TinyMCE插件所需的文件。所示文件路径相对于TinyMCE包根目录，tinymce.min.js存储在此目录中。例如：

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

必需的基础文件夹

在打包TinyMCE时，每个插件都需要以下基础文件夹。

./plugins/<plugincode>

打包语法示例

以下示例显示在包中包含插件的语法。示例使用占位符<plugincode>表示任何插件名称：

import 'tinymce/plugins/<plugincode>';

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

import '<path_to_tinymce_zip>/plugins/<plugincode>';

import '<path_to_tinymce_premium_zip>/plugins/<plugincode>';

require('tinymce/plugins/<plugincode>');

require('tinymce-premium/plugins/<plugincode>');

require('<path_to_tinymce_zip>/plugins/<plugincode>');

require('<path_to_tinymce_premium_zip>/plugins/<plugincode>');

使用付费插件

安装tinymce-premium包后，可以使用两种完全支持的方法之一在编辑器中配置插件。这两种方法都适用于生产环境，并将继续在未来的版本中受支持：

• 打包 — 使用模块打包工具直接在应用程序包中包含插件代码

• 使用external_plugins加载 — 从指定URL在运行时加载插件，支持延迟加载和CDN托管

正确的选择取决于应用程序架构和部署要求。

许可证密钥管理器要求：

在使用商业许可证使用付费插件时，必须包含licensekeymanager插件。如果没有它，编辑器将无法正常工作。有关更多信息，请参阅：许可证密钥。

打包时：

import 'tinymce-premium/plugins/licensekeymanager';

使用external_plugins时：

external_plugins: {
  'licensekeymanager': '<path_to_premium_plugins>/licensekeymanager/plugin.min.js'
}

打包

打包将插件代码直接包含在应用程序包中。此方法适用于已经使用模块打包工具如Webpack、Vite或Rollup的应用程序。

1. 导入所需的付费插件：

   import 'tinymce-premium/plugins/advcode';import 'tinymce-premium/plugins/tinycomments';// 在使用商业许可证使用付费插件时，始终包含licensekeymanager插件。import 'tinymce-premium/plugins/licensekeymanager';

2. 将插件添加到编辑器配置中：

   tinymce.init({
     selector: 'textarea',
     license_key: 'T8LK:...', // 你的商业许可证密钥
     plugins: 'advcode tinycomments',
     // ... 其他配置
   });

有关完整的打包示例，请参阅下面的付费插件和开源插件部分。

使用external_plugins加载

external_plugins选项从指定URL在运行时加载插件。此方法使用延迟加载，从CDN或单独的主机提供TinyMCE资源，并避免将编辑器代码添加到应用程序包中。Tiny Cloud使用此方法加载编辑器。

tinymce.init({
  selector: 'textarea',
  license_key: 'T8LK:...', // 您的商业许可证密钥
  external_plugins: {
    'advcode': '/<path_to_premium_plugins>/advcode/plugin.min.js',
    'tinycomments': '/<path_to_premium_plugins>/tinycomments/plugin.min.js',
    // 使用具有商业许可证的高级插件时，始终包含 licensekeymanager 插件。
    'licensekeymanager': '/<path_to_premium_plugins>/licensekeymanager/plugin.min.js'
  },
  plugins: 'advcode tinycomments',
  // ... 其他配置
});

external_plugins 选项支持三种 URL 格式：

• 绝对 URL（例如 https://cdn.example.com/...）

• 相对于 Web 服务器根目录（例如 /node_modules/...）

• 相对于 TinyMCE base_url（例如 ../../node_modules/...）

有关更多信息，请参阅：external_plugins 配置选项。

高级插件

打包时，将 plugincode 替换为 TinyMCE 配置中的特定插件。

tinymce-premium 包是安装和使用 TinyMCE 高级插件的推荐方式。它包含所有高级插件、皮肤、图标和语言包。

要从 NPM 包中打包高级插件，请导入您需要的单个插件。

import 'tinymce-premium/plugins/advcode';import 'tinymce-premium/plugins/tinycomments';/* 使用具有商业许可证的高级插件时，始终包含 licensekeymanager 插件。 */import 'tinymce-premium/plugins/licensekeymanager';

import '<path_to_tinymce_premium_zip>/plugins/advcode';

require('tinymce-premium/plugins/advcode');
require('tinymce-premium/plugins/tinycomments');
/* 使用具有商业许可证的高级插件时，始终包含 licensekeymanager 插件。 */
require('tinymce-premium/plugins/licensekeymanager');

require('<path_to_tinymce_premium_zip>/plugins/advcode');

如果需要高级皮肤和图标，可以从 tinymce-premium 包中导入它们：

// 高级皮肤（oxide 是默认皮肤）
import 'tinymce-premium/skins/ui/oxide/skin.css';

// 高级图标
import 'tinymce-premium/icons/premium';

• 图标：始终需要默认图标包。高级图标包可能不包含所有图标，并设计为在适合该包时回退到默认图标。同时导入默认和高级图标包，然后在编辑器配置中使用icons选项，告知 TinyMCE 还使用高级图标包。

• 皮肤：导入开源或高级皮肤（不能同时导入两者）。使用编辑器配置中的skin选项配置皮肤。

在使用language选项对编辑器用户界面进行本地化的地方，需要插件语言文件（如./plugins/<plugincode>/langs/sv_SE.js）。

以下插件需要这些插件语言文件：

• AI 助手 (ai)

• 可访问性检查器 (a11ychecker)

• 增强代码 (advcode)

• 增强表格 (advtable)

• 模板 (advtemplate)

• 拼写自动更正 (autocorrect)

• 图像编辑 (editimage)

• 导出为 PDF (exportpdf)

• 导出为 Word (exportword)

• 脚注 (footnotes)

• 从 Word 导入 (importword)

• 合并标签 (mergetags)

• 页面嵌入 (pageembed)

• PowerPaste

• 修订历史 (revisionhistory)

• 目录 (tableofcontents)

• 评论 (tinycomments)

• 拼写检查器 (tinymcespellchecker)

• 排版 (typography)

开源插件

打包时，将plugincode替换为TinyMCE配置中的特定插件。

以下插件还需要在基础文件夹旁边包含其他文件。

表情符号 (emoticons)

./plugins/emoticons/js/emojiimages.js
./plugins/emoticons/js/emojis.js

根据通过emoticons_database设置选择的内容，只需要上述.js文件中的一个。

插件语言文件

在将插件语言文件添加到您的配置时，请将 <plugincode> 占位符替换为特定的 plugincode。

./plugins/<plugincode>/langs/ar.js./plugins/<plugincode>/langs/bg_BG.js./plugins/<plugincode>/langs/ca.js./plugins/<plugincode>/langs/cs.js./plugins/<plugincode>/langs/da.js./plugins/<plugincode>/langs/de.js./plugins/<plugincode>/langs/el.js./plugins/<plugincode>/langs/es.js./plugins/<plugincode>/langs/eu.js./plugins/<plugincode>/langs/fa.js./plugins/<plugincode>/langs/fi.js./plugins/<plugincode>/langs/fr_FR.js./plugins/<plugincode>/langs/he_IL.js./plugins/<plugincode>/langs/hi.js./plugins/<plugincode>/langs/hr.js./plugins/<plugincode>/langs/hu_HU.js./plugins/<plugincode>/langs/id.js./plugins/<plugincode>/langs/it.js./plugins/<plugincode>/langs/ja.js./plugins/<plugincode>/langs/kk.js./plugins/<plugincode>/langs/ko_KR.js./plugins/<plugincode>/langs/ms.js./plugins/<plugincode>/langs/nb_NO.js./plugins/<plugincode>/langs/nl.js./plugins/<plugincode>/langs/pl.js./plugins/<plugincode>/langs/pt_BR.js./plugins/<plugincode>/langs/pt_PT.js./plugins/<plugincode>/langs/ro.js./plugins/<plugincode>/langs/ru.js./plugins/<plugincode>/langs/sk.js./plugins/<plugincode>/langs/sl_SI.js./plugins/<plugincode>/langs/sv_SE.js./plugins/<plugincode>/langs/th_TH.js./plugins/<plugincode>/langs/tr.js./plugins/<plugincode>/langs/uk.js./plugins/<plugincode>/langs/vi.js./plugins/<plugincode>/langs/zh_CN.js./plugins/<plugincode>/langs/zh_TW.js

打包插件语言文件

插件语言文件与 TinyMCE 主 UI 语言文件是分开的。每个插件都有自己的语言文件，位于 plugins/<plugincode>/langs/。

• 核心 UI 语言文件：位于 langs/（例如 tinymce-premium/langs/ar.js）

• 高级插件语言文件：位于 plugins/<plugincode>/langs/（例如 tinymce-premium/plugins/advcode/langs/ar.js）

要打包高级插件语言文件，请使用与打包插件相同的模块语法导入它们，并在导入路径后追加 /langs/<language>.js：

// 导入插件
import 'tinymce-premium/plugins/advcode';
// 导入高级插件的阿拉伯语语言文件
import 'tinymce-premium/plugins/advcode/langs/ar.js';
// 导入主 UI 阿拉伯语语言文件（如果需要）
import 'tinymce-premium/langs/ar.js';

tinymce.init({
  selector: 'textarea',
  language: 'ar',
  plugins: 'advcode',
  // ... 其他配置
});

对于来自 tinymce-premium 的高级插件，语言文件路径必须包含 .js 扩展名。

插件懒加载和附加资源

插件会在运行时懒加载附加资源（JS 和 CSS 文件）以获得最佳性能。这些资源必须：

• 包含在打包文件内，与插件一起（推荐用于打包的应用）

• 作为静态资产放置在预期位置（用于非打包部署）

缺失资源可能会导致插件失败或显示错误。

打包时，请显式导入插件所需的任何附加资源。模块打包工具会将这些文件包含在应用包中，使其在运行时可用。

对于使用 external_plugins 的非打包部署，请确保所有所需的资源文件（CSS、JS 和语言文件）在相对于插件文件位置的预期路径下可访问。

有关需要附加资源的插件的具体示例，请参阅“附加插件资源”。

附加插件资源

在使用模块加载器（Webpack、Vite、Rollup）打包 TinyMCE 时，某些插件需要显式导入附加资源文件（CSS、JS 或语言文件）。这些文件不会由打包工具自动解析，必须手动导入。

要点：

• 核心插件资源通常使用不带文件扩展名的相对路径

• 高级插件资源（来自 tinymce-premium）必须在导入路径中包含 .js 或 .css 文件扩展名

• 语言文件通常位于 plugins/<plugincode>/langs/

• CSS 文件可能位于 plugins/<plugincode>/css/ 或插件根目录下

• 英语是默认语言，因此不存在 en.js 语言文件（插件将回退到英语）

常见插件资源要求

以下插件在打包时需要附加资源文件：

帮助插件（help）

帮助插件需要键盘导航语言文件，以便键盘导航标签页能正常工作：

import 'tinymce/plugins/help/js/i18n/keynav/en';

import '../tinymce/plugins/help/js/i18n/keynav/en';

require('tinymce/plugins/help/js/i18n/keynav/en');

require('../tinymce/plugins/help/js/i18n/keynav/en');

Page Embed 插件 (pageembed)

Page Embed 插件需要一个 CSS 文件以实现正确的样式：

import 'tinymce-premium/plugins/pageembed/css/empa30.css';

import '../plugins/pageembed/css/empa30.css';

require('tinymce-premium/plugins/pageembed/css/empa30.css');

require('../plugins/pageembed/css/empa30.css');

表情符号插件 (emoticons)

表情符号插件需要一个表情符号数据库文件。默认情况下，它使用 js/emojis.js，但也可以通过配置 emoticons_database 选项来使用 js/emojiimages.js。

import 'tinymce/plugins/emoticons/js/emojis';

import '../tinymce/plugins/emoticons/js/emojis';

require('tinymce/plugins/emoticons/js/emojis');

require('../tinymce/plugins/emoticons/js/emojis');

拼写自动更正插件 (autocorrect)

拼写自动更正插件需要一个词汇列表文件。目前仅支持英语。

import 'tinymce-premium/plugins/autocorrect/js/en.js';

import '../plugins/autocorrect/js/en.js';

require('tinymce-premium/plugins/autocorrect/js/en.js');

require('../plugins/autocorrect/js/en.js');

Media Optimizer 插件 (uploadcare)

Media Optimizer 插件需要一个用于视频功能的 webcomponent 文件。当使用该插件的视频功能时，需要 uc-video.js 文件。

import 'tinymce-premium/plugins/uploadcare/js/uc-video.js';

import '../plugins/uploadcare/js/uc-video.js';

require('tinymce-premium/plugins/uploadcare/js/uc-video.js');

require('../plugins/uploadcare/js/uc-video.js');