最近一直在做node+vue+mysql的博客項(xiàng)目肪凛，想用mardown編輯器攒钳，找了很多方法沉帮，最后總結(jié)出以下幾點(diǎn)：
剛開(kāi)始還想用最笨拙的方式饲漾，從數(shù)據(jù)庫(kù)取出數(shù)據(jù)后給添加上p標(biāo)簽就算了，但還是太單薄了
給后臺(tái)取出的數(shù)據(jù)添加p標(biāo)簽钓辆，記錄一下，免得以后用到會(huì)忘
this.articleDetail.context = (isNaN(this.articleDetail.context)) ? this.articleDetail.context.replace(/^/gm, '<p>').replace(/$/gm, '</p>') : null;
1) 使用marked解析markdown文字
這個(gè)就只是解析markdown文字，并不能編輯前联，倒是可以從數(shù)據(jù)庫(kù)中讀取markdown文字進(jìn)行解析,另外代碼高亮還要另外解析功戚，用highlight.js
cnpm install marked<article class="context" v-html="compiledMarkdown"></article>
data(){
return {
articleDetail: [],//數(shù)據(jù)，可以從數(shù)據(jù)庫(kù)中讀取
}
}
computed:{
compiledMarkdown () {
//this.articleDetail.context數(shù)據(jù)
return marked(this.articleDetail.context, { sanitize: true })
}
},
2) 使用mavonEditor
mavonEditor既可作為編輯使用似嗤，也可作為解析使用
API：https://github.com/hinesboy/mavonEditor
剛開(kāi)始做的時(shí)候可以想到用mavonEditor作為編輯器使用啸臀，v-model中綁定數(shù)據(jù)，可以提交到數(shù)據(jù)庫(kù)中烁落，但就是沒(méi)想到怎么去把數(shù)據(jù)庫(kù)中的數(shù)據(jù)取出來(lái)再進(jìn)行解析乘粒，感覺(jué)看官方API也是一頭霧水，網(wǎng)上怎么也搜不到相關(guān)內(nèi)容伤塌，于是還是沉下心來(lái)看API灯萍，總算是想到還可以用此來(lái)解析。
引入
npm install mavon-editor --save
// 全局注冊(cè)
// 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: ' ',//輸入的數(shù)據(jù)
toolbars: {
bold: true, // 粗體
italic: true, // 斜體
header: true, // 標(biāo)題
underline: true, // 下劃線
mark: true, // 標(biāo)記
superscript: true, // 上角標(biāo)
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, // 保存（觸發(fā)events中的save事件）
/* 1.4.2 */
navigation: true // 導(dǎo)航目錄
}
}
}
- 從數(shù)據(jù)庫(kù)中獲取剛剛存入的markdown文字解析到頁(yè)面來(lái)
<mavon-editor
class="md"
:value="articleDetail.context"http://獲取數(shù)據(jù)
: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： 默認(rèn)展示編輯區(qū)域 每聪， preview： 默認(rèn)展示預(yù)覽區(qū)域
editable: false,
toolbarsFlag: false,
scrollStyle: true
}
return data
}
},
