vue markdown的简单使用

 

 

1.简介

一款使用marked和highlight.js开发的一款markdown编辑器，目前只支持在vue项目中使用。
编辑器涵盖了常用的markdown编辑器功能，工具栏可自定义配置，

 

2.安装

npm i -S vue-meditor
cnpm i -S vue-meditor

 

3.在项目中使用

markdown.vue

子组件：markdown-editor.vue

4.props

名称	类型	说明	默认值
title	String	编辑器标题，默认为空，不显示	-
titleStyle	Object	标题样式，如果自定义标题时可自行编写样式	-
initialValue	String	编辑器初始化内容	-
width	Number	编辑器宽度	-
height	Number	编辑器高度，单位 px	600
theme	String	代码块主题配置，共有四个值，分别为Light、Dark、OneDark、GitHub	Light
autoSave	Boolean	是否自动保存	true
interval	Number	自动保存频率，单位毫秒	10000
toolbars	Object	工具栏配置，具体功能详见工具栏功能配置表	-
mode	Number	初始化显示模式 1 分屏显示 2 预览详情 3 全屏编辑	-

5.events

名称	说明
on-save	自动保存或者手动保存时触发，返回当前编辑器内原始输入内容和转以后的内容

6.工具栏配置

名称	说明	默认显示
strong	粗体	是
italic	斜体	是
overline	删除线	是
h1	标题1	是
h2	标题2	是
h3	标题3	是
h4	标题4	否
h5	标题5	否
h6	标题6	否
hr	分割线	是
quote	引用	是
ul	无序列表	是
ol	有序列表	是
code	代码块	是
link	链接	是
image	image	是
table	表格	是
checked	已完成列表	是
notChecked	未完成列表	是
shift	预览	是
print	打印	否
theme	主题切换	是
fullscreen	全屏	是
exportmd	导出为*.md文件	是
importmd

7工具栏配置

// 例：
const config = {
    print:false // 隐藏掉打印功能
}

 这里只是简单的介绍了，而已，自己动手试试，很简单的，也可以自己去配置MarkDown