如何使用 webpack 延迟加载（动态导入）TinyMCE？答案

【问题标题】：How to lazy load (dynamically import) TinyMCE with webpack?如何使用 webpack 延迟加载（动态导入）TinyMCE？
【发布时间】：2020-10-26 15:23:56
【问题描述】：

以标准方式使用 webpack 加载 TinyMCE 非常简单（如此处所述：https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/）。这是我当前的代码：

require.context(
    "file-loader?name=[path][name].[ext]&context=node_modules/tinymce!tinymce/skins",
    true,
    /.*/
);
import "tinymce/tinymce";
import "tinymce/icons/default";
import "tinymce/themes/silver";
import "tinymce/plugins/link";
import "tinymce/plugins/paste";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/image";
import { Editor as _Editor } from "@tinymce/tinymce-react";

由于我项目中的 TinyMCE 仅在少数地方使用，我想延迟加载它 - 假设在 React useEffect 挂钩中，如下所示：

// here goes the require.context from the previous example

// this is inside a React.FC
useEffect(() => {
    const fetchModules = async () => {
        await import("tinymce/tinymce")
        await import("tinymce/icons/default")
        await import("tinymce/themes/silver")
        await import("tinymce/plugins/link")
        await import("tinymce/plugins/paste")
        await import("tinymce/plugins/wordcount")
        await import("tinymce/plugins/image")
        const { Editor: _Editor } = await import("@tinymce/tinymce-react");

        TinymceEditor.current = _Editor; // storing the class so I can render it afterwards

        setLoaded(true) // indicating that everything is loaded and ready to render
    };

    fetchModules()
}, [])

当 TinyMCE 启动时，它会尝试加载皮肤。它在第一个非惰性示例中正常工作。但是在第二个示例中，它尝试加载相对于当前路径名而不是 webpack 根目录的皮肤（例如，如果路径名是 http://localhost:8080/example/，那么它会尝试从 http:/ 拉皮肤/localhost:8080/example//skins/ui/...)。

如何解决这个问题？我愿意接受任何解决方案。

【问题讨论】：

标签： webpack tinymce

【解决方案1】：

我没有使用 ReactJS，但是我通过在 tinymce 初始化期间指定 skin_url 属性解决了这个问题。

tinymce.init({
    ...
    skin_url: 'http://localhost:8080/path/to/skins/'
});

查看 React 集成 docs，您的 init 应该看起来像这样

<Editor
  init={{
    ...
    skin_url: 'http://localhost:8080/path/to/skins/'
  }}
/>

【讨论】：