使用 ES6，将 tinymce 导入为 npm 包答案

【问题标题】：using ES6, import tinymce as npm package使用 ES6，将 tinymce 导入为 npm 包
【发布时间】：2021-07-14 17:58:06
【问题描述】：

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

我正在尝试将importtinymce 加入我的项目。当我调用init() 时，它会做一些事情（隐藏我的textarea，预期的行为），但它没有向我显示所见即所得 编辑器。

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

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

import 'tinymce';

并像这样使用它：

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

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

到目前为止唯一有效的方法：

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

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

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

【问题讨论】：

【解决方案1】：

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

但您可能仍需要对 CSS 进行一些更改，因为尚未加载皮肤。

运行 npm i url-loader --save

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

官方文档指出，皮肤文件应该复制到公共网络文件夹中的相关文件夹'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 文件夹中的所有文件复制到公用文件夹“skins”。

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

【讨论】：