如何使用webpack和dev服务器使用TinyMCE设置皮肤？

我正在尝试让TinyMCE（与Vue 2一起）工作。我正在使用webpack，因此我想将编辑器作为模块导入（为了与vue 2.x兼容，我安装了

tinymce vue

节点模块的第3版）。我在我的

main.js

中注册了tinymce，比如：

import tinymce from 'tinymce/tinymce';
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
...
Vue.use(tinymce);

文档说编辑器必须有一个皮肤可用，但是当我用webpack dev服务器运行我的应用程序进行热重新加载时，它看起来无法找到/访问皮肤，例如

GET http://localhost:8080/js/skins/ui/oxide/skin.min.css (404)
The resource from “http://localhost:8080/js/skins/ui/oxide/skin.min.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

关于使用

文件加载器

为网页设置此选项，有以下几种方法：

require.context(
  'file-loader?name=[path][name].[ext]&context=node_modules/tinymce!tinymce/skins',
  true,
  /.*/
);

根据这些文档，“这会将皮肤目录从node_modules/tinymce复制到您的网页配置中定义的输出目录…”。有人可以提供一个简短的例子，该网页配置，我需要或指向我在正确的方向请

我遵循了一些建议，并尝试在main.js中添加以下内容：

import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/ui/oxide/content.min.css';
import 'tinymce/skins/content/default/content.css';

…并在init上设置

skin:false

选项。我现在可以看到带有工具栏和状态栏的编辑器，但编辑器完全没有响应。内容面板中没有插入符号，虽然工具栏按钮对悬停和单击做出响应，但它们什么也不做，例如没有弹出菜单。浏览器开发控制台（Chrome和Firefox）中没有错误或警告，并且webpack版本没有错误。以下是我的编辑器创建代码：

<div class="editor-content-wrap">
    <editor v-model="editorContent" :init="{
        min_height: 400,
        min_width: 400,
        menubar: false,
        statusbar: true,
        skin: false,
        plugins: [
            'advlist lists image table paste',
        ],
        toolbar:
            'undo redo | formatselect | bold italic backcolor | \
             alignleft aligncenter alignright alignjustify | \
             bullist numlist outdent indent | removeformat',
        }"
    />
</div>

此外，如果我通过向我的应用程序HTML添加脚本导入来包含tiny.cloud中的核心tinymce.min.js，或者如果我只是将api键添加到

编辑器

组件属性中，那么编辑器也可以工作。所以，当我尝试将其导入我的Vue应用程序时，它不起作用

optimization: {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
        output: {
          ascii_only: true,
        },
      },
    }),
  ],
},