以下流程将帮助您使用Vite和ES6+ 语法，打包 NPM 版本的 TinyMCE。该流程假设用户具有使用Vite和ES6+ 语法的经验。以下步骤提供了使用Vite打包基础 TinyMCE 配置的可用示例。

要求

本指南需要以下内容：

  • Node.js 和 NPM。

  • 关于如何使用Vite的基础知识。

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

步骤

  1. 为您的项目创建脚手架。

    npm create vite@5 . && npm install tinymce

  2. 或将 tinymce 和以下开发依赖添加到现有项目中。

    • Vite

      例如：

      npm install tinymce && npm install --save-dev vite

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

    此示例仅适用于 TinyMCE 6.8.0 及以上版本。

    示例 src/editor.js

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

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

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

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

/* Import plugins */
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';

// 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';

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

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

/* 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_url: 'default',
    content_css: 'default',
    /* Alternatively to importing premium plugins directly, you can configure external_plugins to load premium plugins in a different location.
     * Remember to include the licensekeymanager plugin when using premium plugins.
    */
    // 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 通用公共许可证 (GPL) 下自托管 TinyMCE。如需使用商业许可证或包含 premium 插件，请将 gpl 替换为有效的许可证密钥。详情请参阅设置许可证。

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

    示例 src/index.js

    import * as editor from './editor';

const heading = () => {
  const element = document.createElement('h1');
  element.innerText = 'TinyMCE Vite demo';
  return element;
};

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

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

editor.render();

  5. 在 index.html 页面中导入 index.js 文件，例如：

    <!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
</head>

<body>
  <script type="module" src="/src/index.js"></script>
</body>

</html>

  6. 运行 vite dev 模式以测试应用

    npx vite dev

  7. 如果 Vite

    1. 运行成功，请检查编辑器是否在应用中加载。

    2. 运行失败，请检查任何错误和本流程中的配置更改；您可能需要调整以解决在将 TinyMCE 打包到现有项目时的冲突或其他问题。

  8. 运行 vite 生产模式以生成包

    npx vite build

  9. 如果 vite 运行成功，请通过以下命令检查生成结果：

    npx vite preview

后续步骤

有关以下内容的信息：