前言

本文章所有内容，来自v-md-editor官网，本文章只做基本的使用

安装

npm i @kangc/v-md-editor
npm i highlight.js // 用于代码高亮的插件

引入

我们可以在main.js中引入以下文件，并配置，以下里面的组件并不是全部都需要引用，但我们这里先全部引用，来熟悉一下v-md-edit的组件

// 组件
import VueMarkdownEditor from '@kangc/v-md-editor'
import VueMarkdownPriview from '@kangc/v-md-editor/lib/preview'
import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html'

// 组件样式
import '@kangc/v-md-editor/lib/style/base-editor.css'
import '@kangc/v-md-editor/lib/style/preview.css'
import '@kangc/v-md-editor/lib/style/preview-html.css'

// 插件
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index'
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index'

// 插件样式
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css'

// 主题
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
import '@kangc/v-md-editor/lib/theme/style/github.css'

// 语言高亮
import hljs from 'highlight.js/lib/core'
import json from 'highlight.js/lib/languages/javascript'
import javascript from 'highlight.js/lib/languages/javascript'

// 高亮的语言
hljs.registerLanguage('json', json)
hljs.registerLanguage('javascript', javascript)

// 使用主题
VueMarkdownEditor.use(githubTheme, {
  Hljs: hljs
})

// 使用插件
VueMarkdownEditor.use(createEmojiPlugin())
VueMarkdownEditor.use(createLineNumbertPlugin())

// 注册组件
Vue.use(VueMarkdownEditor)
Vue.use(VueMarkdownPriview)
Vue.use(VMdPreviewHtml)

在组件中使用

<template>
  <div>
    <!-- markdown编辑器组件 -->
    <v-md-editor v-model="text" height="400px" :left-toolbar="leftToobar" :disabled-menus="[]" @upload-image="handleUploadImage" />

    <!-- 这也是编辑器组件，不过使用了预览模式，就可以预览markdown -->
    <v-md-editor v-model="text" height="400px" mode="preview" />

    <!-- 预览html的组件 -->
    <v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>
  </div>
</template>

<script>
// xss是将markdown转为html的库
import VueMarkdownEditor, { xss } from '@kangc/v-md-editor'

export default {
  name: 'MarkDownEdit',
  components: {},
  props: {},
  data() {
    return {
      // 左侧工具栏的配置，配什么，显示什么
      leftToobar: 'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image emoji code | save',
      text: '', // markdown 文本
      html: '' // 转换后，用于显示的html
    }
  },
  watch: {
    text(value) {
      // 将markdown转为html
      this.html = xss.process(VueMarkdownEditor.themeConfig.markdownParser.render(value))
    }
  },
  methods: {
    handleUploadImage(event, insertImage, files) {
      // 1、拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      console.log(files)

      // 图片上传成功后，在markdown中插入图片
      // 此处只做示例
      // 在markdown中插入图片
      insertImage({
        url: 'https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0',
        desc: '七龙珠',
        width: '100'
        // height: 'auto',
      })
    }
  }
}
</script>

效果展示