富文本：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即可。

最后：如果在图片处理上有问题的，可以看我的另外一篇博客：

http://t.csdn.cn/41Mqk