Vue引入Tinymce踩坑·记
Tinymce官方文档据说很烂,我还不信,看了之后:什么玩意?
推荐大佬整理的中文站:TinyMCE中文文档
引入方式:
1、按照上面文档的方式自行引入,注意版本问题!注意版本问题!注意版本问题!
2、在自己的Vue项目的components文件夹下新建tinymce文件夹,把下面链接的文件全部下载到里面,如下图
有点慢,建议使用梯子
这是大佬帮我们封装好的,下载好后可以在main.js里引入tinymce或者像我一样在随用随引入
<template>
<div>
<tinymce :height="300" v-model="content"></tinymce>
</div>
</template>
<script>
import Tinymce from "@/components/tinymce";
export default {
name: "",
components: { Tinymce },
props: {},
data() {
return {
content: "tinymce",
};
},
watch: {},
mounted() {},
methods: {},
};
</script>
<style>
</style>
**注意!**这里有个坑,下载的文件里用到了sass,但是我项目没下载,一开始运行时候报错
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!sass-resources-loader?{"resources":["D:\\vue资料\\test_scss\\scsspr\\src\\assets\\css\\app.scss"]}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./HelloWorld.vue in ./src/components/HelloWorld.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-2e66127f","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!sass-resources-loader?{"resources":["D:\\vue资料\\test_scss\\scsspr\\src\\assets\\css\\app.scss"]}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./test1.vue in ./src/components/test1.vue
To install them, [添加链接描述](https://blog.csdn.net/weixin_44748205/article/details/115118322)you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!sass-resources-loader?{"resources":["D:\\vue资料\\test_scss\\scsspr\\src\\assets\\css\\app.scss"]}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./HelloWorld.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-2e66127f","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!sass-resources-loader?{"resources":["D:\\vue资料\\test_scss\\scsspr\\src\\assets\\css\\app.scss"]}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./test1.vue##
所以先下载个sass
npm install node-sass --save-dev
npm install sass-loader --save-dev
**注意!**这里又有个坑(可把我坑崴了):自动下载的node、node-sass和sass-loader的版本可能不对应,版本太高会报 “TypeError: this.getResolve is not a function” 这个错,所以要先看你安装的node.js的版本,再下载相对应的node-sass和sass-loader,对应版本参考:sass版本问题
sass版本问题2
我的node版本是12,所以下载了node-sass@4.14.1和sass-loader@7.3.1,–dev不是必须的,看你需要,然后运行通过!!!!!!
npm install node-sass@4.14.1 --save-dev
npm install sass-loader@7.3.1 --save-dev
这是沸羊羊的感觉!!!