mavon-editor的使用教程

一、安装与配置
（1）、在终端输入命令：
npm install mavon-editor --save
（2）、配置: 在main.js 中输入以下代码
        import Vue from 'vue'
        import mavonEditor from 'mavon-editor'
        import 'mavon-editor/dist/css/index.css'
        Vue.use(mavonEditor)

二、代码书写
1、构建组件，直接写入下面的代码，页面就会有富文本框

代码解释：
1、@imgAdd 主要是监听图片上传事件，当你上传图片的时候，就会自动调用这个函数。
一般来说，在使用富文本的时候，如果存在图片，我们在上传的时候，需要先传给后端，后端返回图片在数据库中的地址，我们再把地址回显出来。
所以，我们点击选择图片的时候，就要把图片的地址传给后端。下面是这个函数的代码书写，共参考：
     imgAdd(pos, $file) {
          //新建form表单类型的数据
          let formData = new FormData();
          //将我们上传的图片地址$file加进表单里面，命名为“file”（参数名字与后端相匹配）
          formData.append("file", $file);
          console.log(formData);
          axios({
            url: this.$api + "icommunity/post/getImageUrl", //请求地址
            method: "POST",
            data: formData,
            headers: { "Content-Type": "multipart/form-data" },
          }).then((res) => {
            if (res.status === 200) {
           // 将后端返回的url放在md中图片的指定位置
              this.$refs.md.$img2Url(pos, res.data.data);
            } else {
              this.$message.error(res.message);
            }
          });
          //访问后台服务器方法
        },

2、@change 函数： 编辑区发生变化的回调事件（render：value 经过markdown解析后的结果）
所以，我们将获得的render复制给富文本的v-model，代码如下：其中html是我给富文本框设置的：v-mldel=html；

到目前为止，你就可以将你想要的数据传给后端了。其中html就是整个富文本框编辑的东西啦。

三、如何从后端数据库中调取并且在页面中显示
从后端获取到数据之后，在html书写的时候，使用v-html即可。