标签：scroll screen header open val style 代码高亮 16px ted
markdown 是什么？？
这个就只是解析markdown文字，并不能编辑，倒是可以从数据库中读取markdown文字进行解析,另外代码高亮还要另外解析，用highlight.js
npm install marked
data() {
return {
lesson:‘‘,
};
},
computed: {
compiledMarkdown(){
return Marked(this.lesson, { sanitize: true })
}
}};
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
}
},
标签：scroll screen header open val style 代码高亮 16px ted
原文地址：https://www.cnblogs.com/Rivend/p/11922970.html
