最近一直在做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
}
},