好用的markdown编辑器mavon-editor

实现效果：

1、下载
npm install mavon-editor -s

2、引入
在需求的组件页内引入该markdown和他的css样式。

<template>
<div><MavonEditor ref="editor" v-model="doc" @save="saveDoc" @change="updateDoc"></MavonEditor></div>
</template>
<script>
import {mavonEditor} from 'mavon-editor'
import "mavon-editor/dist/css/index.css"
export default {
    name:'mavonEditor',
    components:{
        MavonEditor:mavonEditor
    },
    data(){
        return{
            doc:'' //注册绑定内容
        }
    },
    methods:{
        updateDoc(markdown, html) {
            // 此时会自动将 markdown 和 html 传递到这个方法中
            console.log("markdown内容: " + markdown);
            console.log("html内容:" + markdown);
        },
        saveDoc(markdown, html) {
            // 此时会自动将 markdown 和 html 传递到这个方法中
            console.log("markdown内容:" + markdown);
            console.log("html内容:" + html);
        }
    }
}
</script>

即插即用，非常方便