我正在尝试在 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>