第二篇. vue项目中使用mavon-editor插件，实现markdown文档编写

1.安装 mavon-editor

// npm地址：https://www.npmjs.com/package/mavon-editor
npm install mavon-editor --save

2.引入组件

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

3.使用

<template>
  <mavon-editor ref="md" v-model="content" @imgAdd="uploadImg" />
</template>

4.图片上传

uploadImg(pos, file) {
    var formData = new FormData();
    formData.append('img', file);
    // 上传图片 接口
    richTextImgUpload(formData).then(res => {
        if(res.error == 0){
            // 将后端返回的地址替换即可
            this.$refs.md.$img2Url(pos, process.env.VUE_APP_BASE_API_ORIGIN + res.data.imgscr)
        }
    })
}

5.效果预览