开篇

this.formData.content = this.$Base64.decode(this.formData.content);//解析

1. 安装mavon-editor

npm install mavon-editor --save

2. 按需引入、配置
   在要使用markdown编辑器的组件内操作：

// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

components: {  mavonEditor },

全局注册

#main.js 加入
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'    //解决编辑器的功能显示问题
Vue.use(mavonEditor)

自定义样式

参考 https://www.freesion.com/article/95991104769/

3. 使用

<mavonEditor
  :subfield="false"
  :autofocus="false"
  v-model="formData.content"
  ref="md"
  style="width: 99%;"
 />

详细请看他的依赖包redeme 你会有额外的收获的
问题
那么，在常用的操作里面，例如各级标题、表格、加粗加斜、标记、图文……图？此时，我们发现一个问题：如何添加本地图片呢？

Q
在某些IDE里面使用markdown时，可以自由的插入本地图片，那我们在页面中使用此编译器组件如何添加图片呢？

A
监听。没错，就是监听输入框变化。如果监听到有图片插入，那么我们可以先将图片上传至服务器，然后获取到线上url，拿到该url再插入到该位置。那么具体过程就很明显了：

选择本地图片，插入
监听到有图片插入
将该图上传至服务器
获取到服务器返回的图片url
将该线上url冬天插入到输入框中
代码如下

<template>
    <div class="markdown">
        <div class="container">
            <mavon-editor :codeStyle="codeStyle" :ishljs="true"
                        v-model="info.content" :subfield="false" :boxShadow="false" defaultOpen="preview"
                        :toolbarsFlag="false"  v-model="content" :toolbars="markdownOption" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
            <button @click="submit">提交</button>
        </div>
    </div>
</template>

<script>
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'

    export default {
        name: "",
        props: [],
        components: {
            mavonEditor,
        },
        data() {
            return {
codeStyle: 'tomorrow-night', //设置高亮主题 ，
                markdownOption: {
                    bold: false, // 粗体
                    italic: false, // 斜体
                    header: false, // 标题
                    underline: false, // 下划线
                    strikethrough: false, // 中划线
                    mark: false, // 标记
                    superscript: false, // 上角标
                    subscript: false, // 下角标
                    quote: false, // 引用
                    ol: false, // 有序列表
                    ul: false, // 无序列表
                    link: false, // 链接
                    imagelink: false, // 图片链接
                    code: false, // code
                    table: false, // 表格
                    fullscreen: false, // 全屏编辑
                    readmodel: false, // 沉浸式阅读
                    htmlcode: false, // 展示html源码
                    help: false, // 帮助
                    /* 1.3.5 */
                    undo: false, // 上一步
                    redo: false, // 下一步
                    trash: false, // 清空
                    save: false, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    navigation: false, // 导航目录
                    /* 2.1.8 */
                    alignleft: false, // 左对齐
                    aligncenter: false, // 居中
                    alignright: false, // 右对齐
                    /* 2.2.1 */
                    subfield: false, // 单双栏模式
                    preview: false, // 预览
                },
                codeStyle: 'tomorrow-night', //设置高亮主题 ，
                id: null,
                info: null
            },
                content:'',
                html:'',
                configs: {}
            }
        },
        methods: {
            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file){
                let formdata = new FormData();

                this.$upload.post('/上传接口地址', formdata).then(res => {
                    console.log(res.data);
                    this.$refs.md.$img2Url(pos, res.data);
                }).catch(err => {
                    console.log(err)
                })
            },
            // 所有操作都会被解析重新渲染
            change(value, render){
                // render 为 markdown 解析后的结果[html]
                this.html = render;
            },
            // 提交
            submit(){
                console.log(this.content);
                console.log(this.html);
                this.$message.success('提交成功，已打印至控制台！');
            }
        },
        mounted() {

        }
    }
</script>

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 : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}

6、更多配置可以看官方文档
mavonEditor基于Vue的markdown编辑器