以下流程将协助使用 Browserify 并采用 CommonJS syntax 打包 npm 版的 TinyMCE。此流程假设用户有 Browserify 和 CommonJS syntax 的使用经验。以下步骤提供了一个使用 Browserify 打包基本 TinyMCE 配置的可行示例。

要求

本指南需要以下内容：

  • Node.js 和 npm

  • 使用 Browserify 的基础知识

  • （可选：用于高级功能）TinyMCE 的最新版高级 .zip 包，用于包含高级插件

流程

  1. 将 tinymce 和以下开发依赖项添加到项目中。

  2. 创建一个新的源文件，用于从 TinyMCE 导入所需组件并配置编辑器。

    示例 src/editor.js

    const fs = require('fs');

/* 导入 TinyMCE */
const tinymce = require('tinymce/tinymce');

/* 需要默认图标。之后，如有必要，再导入自定义图标 */
require('tinymce/icons/default');

/* 所需的 TinyMCE 组件 */
require('tinymce/themes/silver');
require('tinymce/models/dom');

/* 导入默认皮肤（oxide）。如有必要，可替换为自定义皮肤。 */
require('tinymce/skins/ui/oxide/skin.css');

/* 导入插件 - 在 'plugins' 选项中包含相关插件。 */
require('tinymce/plugins/advlist');
require('tinymce/plugins/code');
require('tinymce/plugins/emoticons');
require('tinymce/plugins/emoticons/js/emojis');
require('tinymce/plugins/link');
require('tinymce/plugins/lists');
require('tinymce/plugins/table');
require('tinymce/plugins/help');
require('tinymce/plugins/help/js/i18n/keynav/en');

/* 从 NPM 导入高级插件 */
require('tinymce-premium/plugins/advcode');
require('tinymce-premium/plugins/licensekeymanager');
require('tinymce-premium/plugins/tinycomments');

/* 需要内容 UI CSS（使用默认的 oxide 皮肤） */
const contentUiSkinCss = fs.readFileSync('node_modules/tinymce/skins/ui/oxide/content.css', { encoding: 'UTF-8' });

/* 默认的内容 CSS 可以更改或替换为编辑器内容的适当 CSS。 */
const contentCss = fs.readFileSync('node_modules/tinymce/skins/content/default/content.css', { encoding: 'UTF-8' });

/* 初始化 TinyMCE */
exports.render = () => {
  tinymce.init({
    selector: 'textarea#editor',
    license_key: 'gpl',
    /* 所有插件都需要导入并添加到 plugins 选项中。 */
    plugins: 'advlist code emoticons link lists table help',
    toolbar: 'bold italic | bullist numlist | link emoticons',
    skin: false,
    content_css: false,
    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
    /* 除了直接导入高级插件外，还可以配置 external_plugins 以从其他位置加载高级插件。
     * 使用高级插件时，请记得包含 licensekeymanager 插件。
    */
    // external_plugins: {
    //   'advcode': '<path_to_premium_plugins>/advcode/plugin.min.js',
    //   'tinycomments': '<path_to_premium_plugins>/tinycomments/plugin.min.js'
    //   'licensekeymanager': '<path_to_premium_plugins>/licensekeymanager/plugin.min.js',
    // },

  });
};
    gpl 许可证密钥适用于根据 GNU General Public License (GPL) 自托管 TinyMCE。要使用商业许可证或包含高级插件，请将 gpl 替换为有效的许可证密钥。详情请参阅 设置许可证。

  3. 将 TinyMCE 资源和配置添加到项目中，并提供一个用于初始化编辑器的目标元素。

    示例 src/main.js

    const editor = require('./editor.js');
/* 创建一个 id="editor" 的 textarea，用于 TinyMCE 的 `selector` 选项 */
const editorArea = () => {
  var element = document.createElement('textarea');
  element.id = 'editor';
  return element
};
/* 创建 textarea 的父元素 */
const parent = document.createElement('p');
/* 将元素添加到页面 */
parent.appendChild(editorArea());
document.body.appendChild(parent);
/* 初始化 TinyMCE */
editor.render();

    示例 demo.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TinyMCE Browserify Demo</title>
  </head>
  <body>
    <h1>TinyMCE Browserify Demo</h1>
    <script src="main.bundle.js"></script>
  </body>
</html>

  4. 运行 Browserify 来测试打包，例如：

    browserify -t brfs -g browserify-css src/main.js -o dist/main.bundle.js

    如果 Browserify 运行成功，请确认编辑器是否已在应用程序中加载。如果 Browserify 运行失败，请检查是否存在任何错误并复查本步骤中的配置更改；在将 TinyMCE 打包到现有项目时，可能需要针对冲突或其他问题进行调整。

后续步骤

有关以下内容的信息：