使用ES6，导入tinymce作为npm包

Question

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

我试图import进入我的项目。当我调用textarea时，它会执行某些操作（隐藏我的init()预期行为），但它不会显示 wysiwyg 编辑器。

如果我在我的html文件中包含了网址，那就可以了，但这不是我想要的，因为每次网页加载时我都不会包含我的自定义组件。对于某些用户来说，脚本标签会过度。

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

import 'tinymce';

并像这样使用它：

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

这不会给我任何错误，它会隐藏textarea，但它不构建 wysiwyg 编辑器。

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

<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 | soot | tff | svg | gif）$ /}

Answer 2

官方文档指出，应将皮肤文件复制到公共Web文件夹中的相对文件夹“皮肤”：

在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”。

通过这种方式，我假设相对于webpack.config.js文件存在文件夹node_modules / tinymce / skins。

Answer 3

有一个最新的官方文档，描述了如何直接从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