Vue中使用markdown
Posted rivend
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
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
}
},
以上是关于Vue中使用markdown的主要内容,如果未能解决你的问题,请参考以下文章