Vue中使用markdown

最近一直在做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"//获取数据
     :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
        }
      },