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"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
        }
      },
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,869評論 18 139
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 用到的組件 1、通過CocoaPods安裝 2、第三方類庫安裝 3、第三方服務 友盟社會化分享組件 友盟用戶反饋 ...
    SunnyLeong閱讀 14,664評論 1 180
  • 13年9月來到這里教語文同時兼任班主任,因為剛從大學校園走出來,第一年的我只會對學生關愛,生氣的時候就會大...
    靜待花開的小語老師cn閱讀 584評論 0 5
  • 對于所不知的事情便上來不分青紅皂白的數落與責罵 要么是幼稚 要么是不愛
    半杯西冷茶閱讀 846評論 0 48