Vue3+Webpack环境下自托管TinyMCE样式及插件加载失败

问题说明 #

已通过以下命令安装TinyMCE及Vue组件：

npm install tinymce@^5
npm install "@tinymce/tinymce-vue@^4"

编辑器组件可运行，但控制台抛出MIME类型错误，导致部分样式和插件加载失败：

"Refused to execute script from 'http://localhost:8100/js/plugins/link/plugin.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."
"Refused to apply style from 'http://localhost:8100/js/skins/ui/oxide/skin.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

用户提供的EditorComponent.vue代码：

<template>
  <page-component>
    <header-component />
    <content-component>
      <editor
        tinymce-script-src="assets/tinymce.min.js"
        v-model="content"
        :init="init"
      />
    </content-component>
  </page-component>
</template>

<script>
import "tinymce/tinymce";
import "tinymce/skins/ui/oxide/skin.css";
import "tinymce/themes/silver";
import "tinymce/icons/default";

/* Import plugins */
import "tinymce/plugins/advlist";
import "tinymce/plugins/autolink";
import "tinymce/plugins/lists";
import "tinymce/plugins/image";
import "tinymce/plugins/charmap";
import "tinymce/plugins/print";
import "tinymce/plugins/preview";
import "tinymce/plugins/anchor";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/code";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/paste";
import "tinymce/plugins/help";
import "tinymce/plugins/wordcount";

import Editor from "@tinymce/tinymce-vue";

import HeaderComponent from "../components/HeaderComponent.vue";

export default {
  name: "Editor",
  components: {
    Editor,
    HeaderComponent,
  },
  data() {
    return {
      content: "",
      init: {
        height: 500,
        menubar: false,
        plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table paste help wordcount",
        ],
        toolbar:
          "undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help",
      },
    };
  },
};
</script>

问题根源 #

1. 重复加载冲突：已经通过ES模块导入TinyMCE核心、皮肤和插件，但<editor>组件中仍设置了tinymce-script-src，导致TinyMCE尝试从指定路径加载资源，而该路径下无对应文件，服务器返回HTML（404页面），触发MIME类型错误。
2. 插件缺失：初始化配置中声明了link插件，但未通过import导入，导致TinyMCE尝试从外部路径加载该插件，进一步引发错误。

修复步骤 #

1. 移除tinymce-script-src属性 #

既然已通过ES模块导入核心代码，无需再通过该属性加载外部脚本，删除后即可避免重复加载问题：

<editor
  v-model="content"
  :init="init"
/>

2. 补充link插件导入 #

在脚本的插件导入区域添加：

import "tinymce/plugins/link";

3. 优化皮肤样式导入（可选） #

为确保样式完整生效，替换原有皮肤CSS导入为minified版本，并添加内容样式：

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

修复后的完整代码 #

<template>
  <page-component>
    <header-component />
    <content-component>
      <editor
        v-model="content"
        :init="init"
      />
    </content-component>
  </page-component>
</template>

<script>
import "tinymce/tinymce";
import "tinymce/skins/ui/oxide/skin.min.css";
import "tinymce/skins/content/default/content.min.css";
import "tinymce/themes/silver";
import "tinymce/icons/default";

/* Import plugins */
import "tinymce/plugins/advlist";
import "tinymce/plugins/autolink";
import "tinymce/plugins/lists";
import "tinymce/plugins/link"; // 新增link插件导入
import "tinymce/plugins/image";
import "tinymce/plugins/charmap";
import "tinymce/plugins/print";
import "tinymce/plugins/preview";
import "tinymce/plugins/anchor";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/code";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/paste";
import "tinymce/plugins/help";
import "tinymce/plugins/wordcount";

import Editor from "@tinymce/tinymce-vue";

import HeaderComponent from "../components/HeaderComponent.vue";

export default {
  name: "Editor",
  components: {
    Editor,
    HeaderComponent,
  },
  data() {
    return {
      content: "",
      init: {
        height: 500,
        menubar: false,
        plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table paste help wordcount",
        ],
        toolbar:
          "undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help",
      },
    };
  },
};
</script>

内容的提问来源于stack exchange，提问作者Petru Tanas