Vue中使用markdown

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

markdown 是什么？？

1) 使用marked解析markdown文字

这个就只是解析markdown文字，并不能编辑，倒是可以从数据库中读取markdown文字进行解析,另外代码高亮还要另外解析，用highlight.js

npm install marked

data() {
return {
lesson:'',
};
},
computed: {
compiledMarkdown(){
return Marked(this.lesson, { sanitize: true })
}
}};

2) 使用mavonEditor

mavonEditor既可作为编辑使用，也可作为解析使用
API：https://github.com/hinesboy/mavonEditor

引入：

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文字解析到页面来

<mavon-editor
class="md"
:value="articleDetail.context"//获取数据
: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
}
},