以下流程将协助你使用 Rollup.js 通过 ES6+ 语法 将 npm 版本的 TinyMCE 打包。此流程假定用户熟悉 Rollup.js 和 ES6+ 语法。以下步骤提供了一个使用 Rollup.js 打包基础 TinyMCE 配置的可行示例。

要求

本指南需要以下内容：

  • Node.js 和 npm

  • 如何使用 Rollup.js 的基础知识

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

流程

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

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

    示例 src/editor.js

    /* 导入 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.css';

/* 导入插件 */
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/code';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/emoticons/js/emojis';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/help';
import 'tinymce/plugins/help/js/i18n/keynav/en';

// 从 NPM 导入高级插件
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// 使用带有商业许可的高级插件时，务必包含 licensekeymanager 插件。
import 'tinymce-premium/plugins/licensekeymanager';

/* 需要内容 UI CSS（使用默认 oxide 皮肤） */
import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.css';

/* 默认的内容 CSS 可以更改或替换为适合编辑器内容的 CSS。 */
import contentCss from 'tinymce/skins/content/default/content.css';

/* 初始化 TinyMCE */
export function render () {
  tinymce.init({
    selector: 'textarea#editor',
    license_key: 'gpl',
    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. 更新项目的 Rollup.js 配置以加载 TinyMCE CSS。

    示例 rollup.config.js

    import postcss from 'rollup-plugin-postcss';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  plugins: [
    nodeResolve(),
    commonjs(),
    postcss({
      include: "**/skin.css",
      inject: false,
      extract: true
    }),
    postcss({
      include: "**/content.css",
      inject: false,
      extract: false
    })
  ],
  output: {
    file: 'dist/main.bundle.js',
    format: 'umd'
  }
};

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

    示例 src/index.js

    import * as editor from './editor';

const editorArea = () => {
  const element = document.createElement('textarea');
  element.id = 'editor';
  return element
};

const parent = document.createElement('p');
parent.appendChild(editorArea());
document.body.appendChild(parent);

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 Rollup Demo</title>
    <link rel="stylesheet" href="main.bundle.css">
  </head>
  <body>
    <h1>TinyMCE Rollup Demo</h1>
    <script src="main.bundle.js"></script>
  </body>
</html>

  5. 运行 Rollup.js 以测试打包文件，例如：

    rollup --config

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

后续步骤

如需以下信息：