一、mavon-editor在Vue中的使用

安装mavon-editor插件：
cnpm install mavon-editor --save

项目中引入mavon-editor：
import { mavonEditor } from ‘mavon-editor’

使用mavon-editor：

   布局部分： <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 800px"/>
 
   js部分：
      export default {
    name: 'markdown',
    data: function(){
        return { 
            content:'',
            html:'',
        }
    },
    components: {
        mavonEditor
    },
    methods: {
        // 将图片上传到服务器，返回地址替换到md中
        $imgAdd(pos, $file){
            var formdata = new FormData();
            formdata.append('file', $file);
            this.$axios({
                url: '这里是服务端url',
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' },
            }).then((url) => {
                console.log(url);
                this.$refs.md.$img2Url(pos, url.data);
            })
        },
        change(value, render){
            // render 为 markdown 解析后的结果
            this.html = render;
        }
      }

二、html显示异常问题（无样式）

对解析后的html在 v-html中显示无样式，原因是只有在使用了的地方，样式才会引入。

解决办法：

在你需要展示html的模块引入import "mavon-editor/dist/css/index.css";
并且加上 *class="markdown-body"*，如下

<div  class="markdown-body"   v-html="markdown_html"/>

如果还是不行的话就通过cdn引入样式，

<link href="https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css" rel="stylesheet">

就可以正常显示了。