javascript - 使用 ES6，导入 tinymce 作为 npm 包

Question

我已经使用 this tutorial 在我的项目中安装了 tinymce 作为包.

我正在尝试导入 tinymce 到我的项目中。当我调用 init() 时，它会执行某些操作(隐藏我的 textarea，预期行为)，但它不会向我显示所见即所得 编辑器。

如果我在我的 html 文件中包含该 url，它可以工作，但这不是我想要的，因为我没有在每次加载页面时包含我的自定义组件。 script 标签对某些用户来说有点矫枉过正。

---

我想像这样(或类似的)导入 tinymce:

import 'tinymce';

并像这样使用它:

constructor(){
  tinymce.init({
    selector: "#mytextarea"
  })
}

这不会给我任何错误，它会隐藏文本区域，但不会构建所见即所得 编辑器。

---

目前唯一有效的方法:

<script src="/path/to/tinymce.min.js"></script>

---

我不想编辑 JavaScript 文件，因为那样会在更新时中断。如果这是唯一的方法，我将不得不这样做。

如何将库导入我的 ES6 模块？

Answer 1

您可以按照以下链接中提到的步骤进行操作

https://github.com/tinymce/tinymce/issues/2836

但是您仍然可能需要进行一些 css 更改，因为未加载皮肤。

运行npm i url-loader --save

在 webpack 配置文件中添加这个{ loader: 'url-loader?limit=100000', test:/.(png|woff|woff2|eot|ttf|svg|gif)$/