最近一直在做node+vue+mysql的博客項目，想用mardown編輯器，找了很多方法，最后總結出以下幾點：
剛開始還想用最笨拙的方式，從數據庫取出數據后給添加上p標簽就算了，但還是太單薄了

給后臺取出的數據添加p標簽，記錄一下，免得以后用到會忘
this.articleDetail.context = (isNaN(this.articleDetail.context)) ? this.articleDetail.context.replace(/^/gm, '<p>').replace(/$/gm, '</p>') : null;

1) 使用marked解析markdown文字

這個就只是解析markdown文字，并不能編輯，倒是可以從數據庫中讀取markdown文字進行解析,另外代碼高亮還要另外解析，用highlight.js

• cnpm install marked
• <article class="context" v-html="compiledMarkdown"></article>

data(){
  return {
    articleDetail: [],//數據，可以從數據庫中讀取
  }
}
computed:{
       compiledMarkdown () {
        //this.articleDetail.context數據
         return marked(this.articleDetail.context, { sanitize: true })
       }
     },

2) 使用mavonEditor

mavonEditor既可作為編輯使用，也可作為解析使用
API：https://github.com/hinesboy/mavonEditor
剛開始做的時候可以想到用mavonEditor作為編輯器使用，v-model中綁定數據，可以提交到數據庫中，但就是沒想到怎么去把數據庫中的數據取出來再進行解析，感覺看官方API也是一頭霧水，網上怎么也搜不到相關內容，于是還是沉下心來看API，總算是想到還可以用此來解析。

引入

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

• 作為編輯器使用

<mavon-editor v-model="context" :toolbars="toolbars" @keydown="" />
data(){
  return {
      context: ' ',//輸入的數據
      toolbars: {
              bold: true, // 粗體
              italic: true, // 斜體
              header: true, // 標題
              underline: true, // 下劃線
              mark: true, // 標記
              superscript: true, // 上角標
              quote: true, // 引用
              ol: true, // 有序列表
              link: true, // 鏈接
              imagelink: true, // 圖片鏈接
              help: true, // 幫助
              code: true, // code
              subfield: true, // 是否需要分欄
              fullscreen: true, // 全屏編輯
              readmodel: true, // 沉浸式閱讀
              /* 1.3.5 */
              undo: true, // 上一步
              trash: true, // 清空
              save: true, // 保存（觸發events中的save事件）
              /* 1.4.2 */
              navigation: true // 導航目錄
            }
  }
}

• 從數據庫中獲取剛剛存入的markdown文字解析到頁面來

<mavon-editor
      class="md"
     :value="articleDetail.context"http://獲取數據
     :subfield = "prop.subfield"
     :defaultOpen = "prop.defaultOpen"
     :toolbarsFlag = "prop.toolbarsFlag"
     :editable="prop.editable"
     :scrollStyle="prop.scrollStyle"
  ></mavon-editor>

    computed: {
        prop () {
          let data = {
            subfield: false,// 單雙欄模式
            defaultOpen: 'preview',//edit： 默認展示編輯區域 ， preview： 默認展示預覽區域 
            editable: false,
            toolbarsFlag: false,
            scrollStyle: true
          }
          return data
        }
      },