如何使用webpack延迟加载(动态导入)TinyMCE

Question

用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/...)。

如何解决这个问题？我对任何解决方案都持开放态度。

Answer 1

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

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

查看React集成文档，您的init应该类似于以下

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