以下步骤将帮助您使用 Rollup.js 和 ES6+ 语法 打包 .zip 版本的 TinyMCE。此过程假设用户具有使用 Rollup.js 和 ES6+ 语法 的经验。以下步骤提供了一个使用 Rollup.js 打包基本 TinyMCE 配置的可用示例。

要求

本指南需要以下内容：

  • Node.js 和 npm

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

步骤

  1. 下载并解压最新版本的 TinyMCE：

  2. 将以下依赖项添加到项目中。

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

    示例 src/editor.js

    /* Import TinyMCE */
import tinymce from '../tinymce/js/tinymce/tinymce';

/* Default icons are required. After that, import custom icons if applicable */
import '../tinymce/js/tinymce/icons/default/icons';

/* Required TinyMCE components */
import '../tinymce/js/tinymce/themes/silver/theme';
import '../tinymce/js/tinymce/models/dom/model';

/* Import the default skin (oxide). Replace with a custom skin if required. */
import '../tinymce/js/tinymce/skins/ui/oxide/skin.css';

/* Import plugins */
import '../tinymce/js/tinymce/plugins/advlist';
import '../tinymce/js/tinymce/plugins/code';
import '../tinymce/js/tinymce/plugins/emoticons';
import '../tinymce/js/tinymce/plugins/emoticons/js/emojis';
import '../tinymce/js/tinymce/plugins/link';
import '../tinymce/js/tinymce/plugins/lists';
import '../tinymce/js/tinymce/plugins/table';
import '../tinymce/js/tinymce/plugins/help';
import '../tinymce/js/tinymce/plugins/help/js/i18n/keynav/en';

// Import premium plugins from NPM
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
import 'tinymce-premium/plugins/licensekeymanager';
/* From ZIP download - download separately and add to /src/plugins */
/* import './plugins/<plugincode>'; */

/* content UI CSS is required (using the default oxide skin) */
import contentUiSkinCss from '../tinymce/js/tinymce/skins/ui/oxide/content.css';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import contentCss from '../tinymce/js/tinymce/skins/content/default/content.css';

/* Initialize 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(),
    /* Optional: Configure external_plugins for lazy loading premium plugins
     * Remove the import or require statement for any premium plugin you want to lazy load,
     * then uncomment and configure external_plugins below:
    */
    // external_plugins: {
    //   'advcode': '/plugins/advcode/plugin.min.js',
    //   'tinycomments': '/plugins/tinycomments/plugin.min.js'
    // },

  });
};
    gpl 许可证密钥用于在 GNU 通用公共许可证 (GPL) 下自托管 TinyMCE。要使用商业许可证或包含高级插件，请将 gpl 替换为有效的许可证密钥。有关详细信息，请参阅 设置许可证。

  4. 更新项目的 Rollup.js 配置以加载 TinyMCE CSS。

    示例 rollup.config.js

    import postcss from 'rollup-plugin-postcss';
import commonjs from '@rollup/plugin-commonjs';

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

  5. 将 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>

  6. 运行 Rollup.js 以测试 bundle，例如：

    rollup --config

    如果 Rollup.js 运行成功，请检查编辑器是否在应用程序中加载。如果 Rollup.js 失败，请检查任何错误并查看此过程中的配置更改；在将 TinyMCE 打包到现有项目时，您可能需要调整以解决冲突或其他问题。

后续步骤

有关以下内容的信息：