120 lines
2.5 KiB
Markdown
120 lines
2.5 KiB
Markdown
|
# vue-Markdown编辑器
|
|||
|
|
### 1.简介
|
|||
|
|
|
|||
|
|
**一款使用marked和highlight.js开发的一款markdown编辑器，目前只支持在vue项目中使用。
|
|||
|
|
编辑器涵盖了常用的markdown编辑器功能，工具栏可自定义配置，也可进行二次开发。**
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 提供的常用功能
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 多种主题，分别支持 Light、Dark（vsCode）、OneDark、GitHub四种主题风格
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 一键打印
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 2.安装
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
npm i -S vue-meditor
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3.在项目中使用
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
import MarkDown from 'vue-meditor'
|
|||
|
|
|
|||
|
|
...
|
|||
|
|
components:{
|
|||
|
|
MarkDown
|
|||
|
|
}
|
|||
|
|
...
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<mark-down/>
|
|||
|
|
</template>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 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|工具栏配置，具体功能详见工具栏功能配置表
|
|||
|
|
|
|||
|
|
### 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 |全屏|是
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 7.其他说明
|
|||
|
|
**关于保存时返回值**
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
markdownValue // 编辑器输入的原始内容
|
|||
|
|
htmlValue // 右侧现实的问转义后的内容
|
|||
|
|
theme // 保存时的主题名字
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**工具栏配置**
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
// 例：
|
|||
|
|
const config = {
|
|||
|
|
print:false // 隐藏掉打印功能
|
|||
|
|
}
|
|||
|
|
<MarkDown :toolbars="config"/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
**关于二次开发**
|
|||
|
|
|
|||
|
|
原始文件在src/markdown下，可在其基础上自定义开发，也可将markdown文件夹
|
|||
|
|
|
|||
|
|
复制到新项目中，安装对应依赖 highlight.js和marked即可
|
|||
|
|
|