Vue引入TinyMCE

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

这是沸羊羊的感觉！！！