vue markdown的简单使用

 

 

1.简介

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

vue markdown的简单使用_第1张图片

 

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

你可能感兴趣的:(vue)