Vue markdown编辑器插件

1、安装：yarn add mavon-editor
2、引入（在main.js全局注册）

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

3、代码

<template lang="html">
  <!--markdown插件： mavon-editor -->
  <mavon-editor
    ref="md"
    v-model="value"
    @change="change"
    @save="save"
    @imgAdd="imgAdd"
  />
</template>

<script>
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    change (value) {
      //  获取预览那边的html
      // this.$refs.md.d_render
      // 获取输入的内容
      // this.$refs.md.d_value
    },
    save (value) {
      this.$emit('save', value)
    },
    imgAdd (pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData()
      formdata.append('file', $file, $file.name)
      this.requestUtil
        .axiosMethods({
          url: 'api/util/qiniu/img',
          method: 'POST',
          data: formdata
        })
        .then(res => {
          const data = res.data.meta
          // 图片上传成功就替换图片链接
          this.$refs.md.$img2Url(pos, data.url)
        })
        .catch(() => {
          // 图片上传失败就移除图片
          this.$refs.md.$refs.toolbar_left.$imgDelByFilename($file.name)
        })
    }
  }
}
</script>
<style>
  .markdown-body em{
    font-style: oblique;
  }
  .markdown-body ul{
     list-style-type: disc;
  }
  .markdown-body ol{
    list-style-type: decimal;
  }
</style>
<style scoped>
  .markdown-body{
    min-height: calc(100vh - 135px);
  }
</style>