Vue使用mavon-editor插件解析markdown编辑预览

1、安装mavon-editor插件

npm install mavon-editor --save

2、在main.js中引入mavon-editor

//全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'	//解决编辑器的功能显示问题
Vue.use(mavonEditor)

3、HTML使用插件展示单栏(预览区域)

<mavon-editor
        class="md"
        :value="webDataString"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"
      />

效果：

4、HTML使用插件展示双栏(编辑预览同屏)

<mavon-editor
        class="mavon"
        codeStyle="atom-one-dark"
        v-model="webDataString"
        :ishljs="true"
        ref="md"
      />

效果：

5、上传图片

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `，`$vm`为 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}

6、更多配置可以看官方文档

mavonEditor基于Vue的markdown编辑器