使用 Vue 3 自托管的 Tinymce 无法加载样式

问题描述 投票:0回答:0

我正在尝试在 Vue3 + webpack 应用程序中以自托管模式设置 TinyMCE。

我使用以下 npm 命令安装了 tiny:

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

到目前为止,编辑器组件可以工作,但不是所有样式和一些插件都没有加载,在控制台中出现以下错误:

“拒绝从‘http://localhost:8100/js/plugins/link/plugin.js’执行脚本,因为它的 MIME 类型(‘text/html’)不可执行,并且启用了严格的 MIME 类型检查。”

“拒绝应用来自‘http://localhost:8100/js/skins/ui/oxide/skin.min.css’的样式,因为它的 MIME 类型(‘text/html’)不是受支持的样式表 MIME 类型,并且已启用严格的 MIME 检查。”

我的猜测是我没有正确导入或没有正确执行初始化?

控制台:

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>

javascript vue.js vuejs3 tinymce
© www.soinside.com 2019 - 2024. All rights reserved.