山河浪漫，
人间温暖。

1、使用mavonEditor编辑文章

1）引入

npm install mavon-editor --save
// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

2）组件中使用

 <mavon-editor
            :toolbars="toolbars"
            @imgAdd="handleEditorImgAdd"
            @imgDel="handleEditorImgDel"
            style="height:600px"
            v-model="form.md"
            @change="change"
            ref=md
          />

data(){
  return {
      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: false,
        table: true,
        fullscreen: true,
        readmodel: true,
        htmlcode: true,
        help: true,
        undo: true,
        redo: true,
        trash: true,
        save: true,
        navigation: true,
        alignleft: true,
        aligncenter: true,
        alignright: true,
        subfield: true,
        preview: true
      }
  }
}
methods: {
// 监听markdown变化
    change(value, render) {
      this.form.content = render
      this.form.md = value
    },
    // 上传图片接口pos 表示第几个图片
    handleEditorImgAdd(pos, $file) {
      var formdata = new FormData()
      formdata.append('file', $file)
      request({
        url: '/qiniu/upload',
        method: 'post',
        data: formdata
      }).then(res => {
        var url = res.data.url
        this.$refs.md.$img2Url(pos, url) // 这里就是引用ref = md 然后调用$img2Url方法即可替换地址
      })
    },
    handleEditorImgDel() {
      console.log('handleEditorImgDel') // 我这里没做什么操作，后续我要写上接口，从七牛云CDN删除相应的图片
    }
}

数据库中最好有两个字段，分别存储markdown编辑框中的文字（文章再次编辑用）和markdown编辑框对应的html文本（文章展示用）。

2、使用github-markdown展示文章

1）引入

npm install --save github-markdown-css

2） 导入github-markdown-css

在所需展示markdown的页面 import ‘github-markdown-css/github-markdown.css’
并且在article 标签添class=“markdown-body”

<style>
// 根据自己的进行调整
.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
}

// 这个要配合移动端
@media (max-width: 767px) {
	.markdown-body {
   	 padding: 15px;
    }
}
</style>

//主体展示内容部分
<template>
 <article class="markdown-body" style="text-align:left" v-html="content"></article>
</template>

//导入 样式，
<script>
import 'github-markdown-css/github-markdown.css'  //导入
export default {
	name : 'MainContent',
	props:['content' ],
  	data() {
	  return {
 
	  };
    },
}
</script>