指路牌
- Markdown庫研究
- 前端解析markdown
- 前端markdown編輯器
適用場景
- 前端markdown編輯器
- 前端markdown解析器
參考博客
- 李牧敲代碼 -- mavon-editor 使用教程
- Jerry Wang -- 推薦一個markdown格式轉(zhuǎn)html格式的開源JavaScript庫
- 等.....
正文
很早以前就想自己搭建一個博客系統(tǒng)，本以為最麻煩的應(yīng)該是用戶管理，后來發(fā)現(xiàn)最麻煩的居然是文本編輯器...我自己是不太喜歡富文本編輯器的，平時都是印象筆記寫文章，md用的很習(xí)慣，就想要尋找一個前端解析md的庫，結(jié)果這個坑是真的有點深...
首先markdown的本質(zhì)是將md的標(biāo)記語法轉(zhuǎn)換成前端代碼，而這個轉(zhuǎn)換過程可以分為前端完成與后端完成兩個大方向，我個人覺得渲染工作應(yīng)該放在前端完成，這樣一方面可以減輕后臺的壓力，充分利用起客戶端的性能。(個人覺得客戶端的性能是非常過剩的)，另一方面，前端語言相對比較統(tǒng)一，便于維護與發(fā)展，相比之下，雖然后臺工在業(yè)中JAVA是龍頭，但不可否認(rèn)還有php龐大的用戶群體，和我這種喜歡小語種開發(fā)后臺的。
從結(jié)果上來講，我看到的md庫非常的不統(tǒng)一，我看到的有：marked、markdown-js、vue-md-loader、js-markdown-loader、parsedown、Ciconia、decoda、showdown、md-page等，這里面既有前端解析庫，也有后臺解析庫，我沒有時間能去研究和對比每一個庫，大部分是通過體驗別人開發(fā)的demo來體驗每個庫的功能，首先我pass掉了所有的后端庫（其實也看了一個Python的庫，使用的非常不愉快）,而是將精力放在了前端庫，我常用的MD標(biāo)簽有：標(biāo)題、圖片、備注、代碼塊、無序序列，有序序列、鏈接、表格。結(jié)果上講大部分沒有符合我的預(yù)期，主要是對代碼塊于備注的支持不是很好，這是我無法接受的。
最后的結(jié)論是沒有找到一個非常方面，能開箱即用功能比較完善的庫，這一度讓我blog系統(tǒng)開發(fā)陷入了無法推進(jìn)的地步，原本計劃把其他事情都延后，想先解決MD編輯器的問題，然后我就碰到了救星 -- Mavon-Editor
Mavon-Editor
Github -- Mavon-Editor
如果當(dāng)初我選擇學(xué)習(xí)Vue是因為Vue的風(fēng)格，因為Vue的logo，因為尤雨溪，那現(xiàn)在最大的原因就是因為Mavon-Editor了
需要說明的是，Mavon-Editor是一個基于Vue的庫，并不適用于其他框架(?),它提供了非常豐富的功能，開箱即用，既可以用于編輯，也可以用于解析，也是因為這個庫，大大加速了我個人blog系統(tǒng)的開發(fā)進(jìn)度。首先來看幾張效果圖
解析
編輯
輕易的拓展 -- emoji
Mavon-Editor 非常豐富的基本功能，包括：標(biāo)題、斜體、粗體、下劃線、中劃線、標(biāo)記、上角標(biāo)、下角標(biāo)、居左居中具右、引用、有序序列、無序序列、連接、圖片、代碼、表格、標(biāo)題導(dǎo)航、全屏編輯模式、全憑閱讀模式、單欄模式、查看html文本等...
同時提供多種API，能夠自定義功能欄的功能模塊，基本樣式，以及事件監(jiān)聽如：監(jiān)控文本變動、模式切換變動等，詳細(xì)可以參見文檔。
使用也非常方便：
- 安裝
npm install mavon-editor --save
- 全局引入
// main.js
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
- 使用(默認(rèn)是編輯器模式)
<mavon-editor v-model="value"/>
- 閱讀模式
<mavon-editor
:value="input"
:subfield = "false"
:defaultOpen = "'preview'"
:toolbarsFlag = "false"
:boxShadow="false"
:transition="false"
></mavon-editor>
Mavon-Editor功能豐富、拓展方便，渲染效果也非?？捎^，整體體驗并不亞于簡書或印象筆記的書寫體驗。
