最近一直在做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
<template>
<article class="context" v-html="compiledMarkdown"></article>
</template>
<script>
export default{
data(){
return {
articleDetail: [],//数据，可以从数据库中读取
}
},
computed:{
compiledMarkdown () {
//this.articleDetail.context数据
return marked(this.articleDetail.context, { sanitize: true })
}
}
}
</script>
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)
- 作为编辑器使用
<template>
<mavon-editor v-model="context" :toolbars="toolbars" @keydown="" />
</template>
<script>
export default{
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 // 导航目录
}
}
}
}
</script>
- 从数据库中获取刚刚存入的markdown文字解析到页面来
<template>
<mavon-editor
class="md"
:value="articleDetail.context"//获取数据
:subfield = "prop.subfield"
:defaultOpen = "prop.defaultOpen"
:toolbarsFlag = "prop.toolbarsFlag"
:editable="prop.editable"
:scrollStyle="prop.scrollStyle"
></mavon-editor>
</template>
<script>
export default{
computed: {
prop () {
let data = {
subfield: false,// 单双栏模式
defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
editable: false,
toolbarsFlag: false,
scrollStyle: true
}
return data
}
},
}
</script>
本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2022/01/14 10:04