最近一直在做node+vue+mysql的博客项目,想用mardown编辑器,找了很多方法,最后总结出以下几点:
刚开始还想用最笨拙的方式,从数据库取出数据后给添加上p标签就算了,但还是太单薄了
给后台取出的数据添加p标签,记录一下,免得以后用到会忘
this.articleDetail.context = (isNaN(this.articleDetail.context)) ? this.articleDetail.context.replace(/^/gm, '
').replace(/$/gm, '
') : null;1) 使用marked解析markdown文字
这个就只是解析markdown文字,并不能编辑,倒是可以从数据库中读取markdown文字进行解析,另外代码高亮还要另外解析,用highlight.js
cnpm install marked
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)
作为编辑器使用
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文字解析到页面来
class="md"
:value="articleDetail.context"//获取数据
:subfield = "prop.subfield"
:defaultOpen = "prop.defaultOpen"
:toolbarsFlag = "prop.toolbarsFlag"
:editable="prop.editable"
:scrollStyle="prop.scrollStyle"
>
computed: {
prop () {
let data = {
subfield: false,// 单双栏模式
defaultOpen: 'preview',//edit: 默认展示编辑区域 , preview: 默认展示预览区域
editable: false,
toolbarsFlag: false,
scrollStyle: true
}
return data
}
},