以下步骤将帮助您使用 CommonJS 语法 通过 Webpack 打包 TinyMCE 的 NPM 版本。该过程假定用户熟悉 Webpack 和 CommonJS 语法。以下步骤提供了一个使用 Webpack 打包基本 TinyMCE 配置的可运行示例。

要求

本指南需要以下内容：

  • Node.js 和 NPM

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

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

步骤

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

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

    示例 src/editor.js

    /* Import TinyMCE */
const tinymce = require('tinymce/tinymce');

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

/* Required TinyMCE components */
require('tinymce/themes/silver');
require('tinymce/models/dom');

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

/* Import plugins - include the relevant plugin in the 'plugins' option. */
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');

/* content UI CSS is required (using the default oxide skin) */
const contentUiSkinCss = require('tinymce/skins/ui/oxide/content.css');

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
const contentCss = require('tinymce/skins/content/default/content.css');

/* Initialize TinyMCE */
exports.render = () => {
  tinymce.init({
    selector: 'textarea#editor',
    license_key: 'gpl',
    /* All plugins need to be imported and added to the plugins option. */
    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()
  });
};
    gpl 许可证密钥用于根据 GNU 通用公共许可证 (GPL) 自托管 TinyMCE。要使用商业许可证或包含高级插件，请将 gpl 替换为有效的许可证密钥。有关详细信息，请参阅 设置许可证。

  3. 更新项目的 Webpack 配置以加载 TinyMCE 的 CSS 并优化 TinyMCE 的资源。

    示例 webpack.config.js

    const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  resolve: {
    extensions: ['.js']
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      title: 'TinyMCE Webpack Demo',
      meta: { viewport: 'width=device-width, initial-scale=1' }
    }),
  ],
  module: {
    rules: [
      {
        test: /skin\.css$/i,
        use: [ MiniCssExtractPlugin.loader, 'css-loader' ],
      },
      {
        test: /content\.css$/i,
        loader: 'css-loader',
        options: {
          esModule: false,
        },
      },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        tinymceVendor: {
          test: /[\\/]node_modules[\\/](tinymce)[\\/](.*js|.*skin.css)|[\\/]plugins[\\/]/,
          name: 'tinymce'
        },
      },
    }
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public'),
    clean: true,
  },
};

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

    示例 src/index.js

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

  5. 运行 Webpack 测试打包，例如：

    webpack --config webpack.config.js

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

后续步骤

有关以下信息：