Vue：Vue-cli2结合mavonEditor实现MarkDown编辑器

1. 安装

• npm install mavon-editor --save

2. 注册

在main.js中进行引入注册

// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
    'el': '#main',
    data() {
        return { value: '' }
    }
})

3. 基础使用

在组件中，直接通过​​<mavon-editor/>​​标签进行使用

<template>
  <div id="MarkDown">
    <mavon-editor v-model="value"/>
  </div>
</template>

<script>
export default {
  name: "MarkDown",
  data() {
    return {
      value:123
    }
  }
}
</script>

<style lang="scss" scoped>
#MarkDown {
  height: 100%;
  width: 100%;
  background-color: blue;
}
</style>

效果：

4. API

props

/*
    默认工具栏按钮全部开启, 传入自定义对象
    例如: {
         bold: true, // 粗体
         italic: true,// 斜体
         header: true,// 标题
    }
    此时, 仅仅显示此三个功能键
 */
toolbars: {
   bold: true, // 粗体
   italic: true, // 斜体
   header: true, // 标题
   underline: true, // 下划线
   strikethrough: true, // 中划线
   mark: true, // 标记
   superscript: true, // 上角标
   subscript: true, // 下角标
   quote: true, // 引用
   ol: true, // 有序列表
   ul: true, // 无序列表
   link: true, // 链接
   imagelink: true, // 图片链接
   code: true, // code
   table: true, // 表格
   fullscreen: true, // 全屏编辑
   readmodel: true, // 沉浸式阅读
   htmlcode: true, // 展示html源码
   help: true, // 帮助
   /* 1.3.5 */
   undo: true, // 上一步
   redo: true, // 下一步
   trash: true, // 清空
   save: true, // 保存（触发events中的save事件）
   /* 1.4.2 */
   navigation: true, // 导航目录
   /* 2.1.8 */
   alignleft: true, // 左对齐
   aligncenter: true, // 居中
   alignright: true, // 右对齐
   /* 2.2.1 */
   subfield: true, // 单双栏模式
   preview: true, // 预览
}

events 事件绑定

5. 代码高亮

安装highlight.js
​​npm install highlight.js​​

main.js中引入并注册全局指令

// 引入高亮
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
// 注册指令
Vue.directive('highlight', function (el) {
let blocks = el.querySelectorAll('pre code')
blocks.forEach((block) => {
hljs.highlightBlock(block)
    })
})

组件中引入css

import 'mavon-editor/dist/markdown/github-markdown.min.css'

使用指令即可

6. 完整组件代码

<template>
  <div id="MarkDown" v-highlight>
    <mavon-editor
        id="md"
        v-model="value" :fontSize="fontSize" :scrollStyle="scrollStyle"
        :placeholder="placeholder"
        :codeStyle="codeStyle" :ishljs="ishljs" :toolbars="toolbars"
        @save="saveImpl" @imgAdd="imgAddImpl" @imgDel="imgDelImpl"
    />
  </div>
</template>

<script>
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import {textService,demo} from "@/service/api";

const toolbars = {
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下划线
  strikethrough: true, // 中划线
  mark: true, // 标记
  superscript: true, // 上角标
  subscript: true, // 下角标
  quote: true, // 引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: true, // 链接
  imagelink: true, // 图片链接
  code: true, // code
  table: true, // 表格
  fullscreen: false, // 全屏编辑
  readmodel: false, // 沉浸式阅读
  htmlcode: false, // 展示html源码
  help: true, // 帮助
  /* 1.3.5 */
  undo: true, // 上一步
  redo: true, // 下一步
  trash: true, // 清空
  save: true, // 保存（触发events中的save事件）
  /* 1.4.2 */
  navigation: true, // 导航目录
  /* 2.1.8 */
  alignleft: true, // 左对齐
  aligncenter: true, // 居中
  alignright: true, // 右对齐
  /* 2.2.1 */
  subfield: true, // 单双栏模式
  preview: false, // 预览
}

export default {
  name: "MarkDown",
  props: {
    editorContent: {type: String, default: null},
    fontSize: {type: String, default: `18px`},
    scrollStyle: {type: Boolean, default: true},
    placeholder: {type: String, default: `请输入内容`},
    ishljs: {type: Boolean, default: true},
    codeStyle: {type: String, default: "tomorrow-night-eighties"},
  },
  data() {
    return {
      toolbars: toolbars,
      editText: ""
    }
  },
  methods: {
    /**
     * ctrl + s 的回调事件(保存按键,同样触发该回调)
     * @param value
     * @param render
     */
    saveImpl(value, render) {
      textService().then(res => {
        console.log(res);
      })
    },
    /**
     * 图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)
     * @param filename
     * @param imgFile
     */
    imgAddImpl(filename, imgFile) {
      const formdata = new FormData();
      formdata.append('image', imgFile);
      demo(formdata).then(res => {
        console.log(res);
      })
    },
    /**
     * 图片文件删除回调事件(filename: 写在md中的文件名)
     * @param filename
     */
    imgDelImpl(filename) {

    }
  },
  computed: {
    value: {
      get: function () {
        return this.editorContent
      },
      // setter
      set: function (newValue) {
        this.editText = newValue
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#MarkDown {
  height: 100%;
  width: 100%;
  position: relative;

  #md {
    height: 100%;
    width: 100%;
  }
}
</style>