使用 ES6，导入 tinymce 作为 npm 包

Question

在我的项目中安装了 tinymce 作为包

我正在尝试 import tinymce 到我的项目中。当我调用 init() 时，它做了一些事情（隐藏了我的 textarea，预期的行为），但它没有向我显示 wysiwyg 编辑器。

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

我想像这样（或类似的）导入 tinymce：

import 'tinymce';

并像这样使用它：

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

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

目前唯一有效的方法：

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

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

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

Answer 1

您可以按照下面提到的步骤进行操作link

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

运行 npm i url-loader --save

在 webpack 配置文件中添加这个 { 装载机：'url-loader?limit=100000'，测试：/.(png|woff|woff2|eot|ttf|svg|gif)$/ }

Answer 2

这里有一个更新的官方文档，描述了如何直接从 npm 使用 tinymce，没有捆绑，并设置你的路径：https://www.tiny.cloud/docs/configure/editor-appearance/#skin_url

就我而言：

tinymce.init({
  selector: '.editor', 
  skin_url: '/node_modules/tinymce/skins/ui/oxide',
});

虽然这可行，但他们似乎并没有优先考虑这个，因为它仍然试图从另一个路径加载一些 css。

此外，您可以为 tinymce-i18n 包提供 language_url

Answer 3

官方文档指出，皮肤文件应该复制到public web 文件夹中的相对文件夹'skins'：

在Linux中你可以通过

解决这个问题

cp -r node_modules/tinymce/skins skins

但是如果你使用的是Webpack，将下面的webpack.config.js添加到Encore对象中:

.copyFiles({
    from: './node_modules/tinymce/skins',
    to: 'skins/[path][name].[ext]'
})

这将在构建资源时将所有文件从 node_modules/tinymce/skins 文件夹复制到 public 文件夹 'skins'。

据此我假设文件夹 node_modules/tinymce/skins 相对于 webpack.config.js 文件存在。

using ES6, import tinymce as npm package