vue2实现markdown编辑器，实现同步滚动，实时预览等功能

# use npm
npm i @kangc/v-md-editor -S
# use yarn
yarn add @kangc/v-md-editor
复制代码

import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
VueMarkdownEditor.use(vuepressTheme);
Vue.use(VueMarkdownEditor);
复制代码

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>
复制代码

import Prism from 'prismjs';
VueMarkdownEditor.use(vuepressTheme, {
  Prism,
  extend(md) {
    // md为 markdown-it 实例，可以在此处进行修改配置,并使用 plugin 进行语法扩展
    // md.set(option).use(plugin);
  },
});
复制代码

# yarn
yarn add babel-plugin-prismjs --dev
# npm
npm install babel-plugin-prismjs
复制代码

// babel.config.js
module.exports = {
  plugins: [
    [
      'prismjs',
      {
        languages: ['json'],
      },
    ],
  ],
};
复制代码

<template>
  <v-md-editor
    v-model="text"
    left-toolbar="undo redo | image"
    :disabled-menus="[]"
    @upload-image="handleUploadImage"
    height="500px"
  />
</template>
<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    handleUploadImage(event, insertImage, files) {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      console.log(files);
      // 此处只做示例
      insertImage({
        url:
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
        desc: '七龙珠',
        // width: 'auto',
        // height: 'auto',
      });
    },
  },
};
</script>
复制代码

<template>
    <vue-markdown-editor
      v-model="editor"
      height="100%"
      :disabled-menus="[]"
      @upload-image="onUploadImage"
      ></vue-markdown-editor>
  </template>
  <script>
import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
import Prism from 'prismjs'
import axios from 'axios'
import auth from '@/utils/auth'
VueMarkdownEditor.use(vuepressTheme, { Prism, extend(md) {} })
  export default {
    data() {
      return {
        editor: '',
      }
    },
    components: { VueMarkdownEditor },
    mounted() {
        document.querySelector('.v-md-editor').style.height = document.body.offsetHeight - 50 + 'px'
    },
    methods: {
         // 上传图片
        onUploadImage(event, insertImage, files) {
            const file = files[0],
                  path = process.env.VUE_APP_BASE_API,
                  index = path.lastIndexOf("\/")
            let param = new FormData()
            param.append('image', file)
            const config = { headers: {
              'Content-Type': 'multipart/form-data',
              'Authorization': auth.getToken()
            } }
            axios.post(`${path}doc/uploadfile/`, param, config).then(r => {
                if(r.data.code == 200) {
                  const last = path.slice(0, index)
                  insertImage({
                      url: last + r.data.data.url,
                      desc: files[0].name
                  })
                }
            }).catch(e => {
                this.Toast(2, '图片上传出了点小问题，请稍后重试')
            })
        }
    }
  };
  </script>
  <style>
.vuepress-markdown-body h1{ font-size: 28px; }
.vuepress-markdown-body h2{ font-size: 26px; }
.vuepress-markdown-body h3{ font-size: 24px; }
.vuepress-markdown-body h4{ font-size: 22px; }
.vuepress-markdown-body h5{ font-size: 20px; }
.vuepress-markdown-body:not(.custom){padding: 5px 10px!important;}
  </style>
复制代码