分享一个vue的markdown编辑器

使用文档
http://ckang1229.gitee.io/vue-markdown-editor/zh/

体验地址
http://www.leany.top/editor

editor.md编辑器看起来效果很绚，但是各种bug各种坑，而且几年前就不维护了，网上了找半天，找到了一个好用点的markdown编辑器v-md-editor

v-md-editor特性（摘自官网）

1. 高度可定制化
2. 高度可扩展性
3. 支持自定义主题包
4. 提供开箱即用的主题包
5. 提供多个组件。可按需使用。

官网有详细的文档说明，这里简单说一下我封装的组件

• 组件源码

<template>
  <v-md-editor
    v-model="content"
    :height="height"
    :disabled-menus="[]"
    :include-level="[1, 2, 3, 4, 5, 6]"
    left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code emoji todo-list katex mermaid | exportMd importMd | save"
    right-toolbar="preview toc sync-scroll fullscreen"
    :toolbar="toolbar"
    @upload-image="handleUploadImage"
    @change="handleChange"
  />
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'MarkdownEditor',
  props: {
    modelValue: {
      type: String,
      required: false,
      default: ''
    },
    height: {
      type: String,
      required: false,
      default: '600px'
    }
  },
  data() {
    return {
      content: '',
      toolbar: {
        katex: {
          title: '公式',
          icon: 'el-icon-s-marketing',
          action(editor) {
            editor.insert(function(selected) {
              const content = '$$\\sum_{i=1}^n a_i=0$$'
              return {
                text: `${content}`,
                selected: content
              }
            })
          }
        },
        mermaid: {
          title: '流程图',
          icon: 'el-icon-data-analysis',
          action(editor) {
            editor.insert(function(selected) {
              const content = '```mermaid\n' +
                  'graph LR\n' +
                  'A --- B\n' +
                  'B-->C[fa:fa-ban forbidden]\n' +
                  'B-->D(fa:fa-spinner);\n' +
                  '```'
              return {
                text: `${content}`,
                selected: content
              }
            })
          }
        },
        exportMd: {
          title: '导入',
          icon: 'el-icon-upload2',
          action(editor) {
            editor.insert(function(selected) {
              alert('该功能未实现')
              return {
                text: ''
              }
            })
          }
        },
        importMd: {
          title: '导出',
          icon: 'el-icon-download',
          action(editor) {
            editor.insert(function(selected) {
              alert('该功能未实现')
              return {
                text: ''
              }
            })
          }
        }
      }
    }
  },
  watch: {
    modelValue(nval) {
      this.content = nval
    }
  },
  methods: {
    handleUploadImage(event, insertImage, files) {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      const param = new FormData()
      param.append('upload', files[0])
      request({
        url: '/markdown/upload/img',
        method: 'POST',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        data: param
      }).then(({ data }) => {
        // 此处只做示例
        insertImage({
          url: data,
          desc: data
          // width: 'auto',
          // height: 'auto',
        })
      })
    },
    handleChange(text) {
      this.$emit('update:modelValue', text)
    }
  }
}
</script>

<style scoped>

</style>

• 使用

<MarkdownEditor v-model="content" height="600px" />

• 预览

<v-md-editor v-model="blog.content" mode="preview" />