vue-markdown/README.md

153 lines
3.2 KiB
Markdown
Raw Normal View History

2018-08-23 15:11:31 +08:00
# vue-Markdown编辑器
[在线示例地址](https://zhaoxuhui1122.github.io/vue-markdown/)
GitHub :[https://github.com/zhaoxuhui1122/vue-markdown]( https://github.com/zhaoxuhui1122/vue-markdown)
2018-11-06 09:07:41 +08:00
2018-08-23 15:11:31 +08:00
### 1.简介
**一款使用marked和highlight.js开发的一款markdown编辑器目前只支持在vue项目中使用。**
**编辑器涵盖了常用的markdown编辑器功能工具栏可自定义配置也可进行二次开发。**
2018-08-23 15:11:31 +08:00
**效果**
![image](http://smalleyes.oss-cn-shanghai.aliyuncs.com/WechatIMG586.png)
2018-08-23 15:11:31 +08:00
### 2.安装
```
npm i -S vue-meditor
直接复制对应的组件到项目目录内 (推荐)
2018-08-23 15:11:31 +08:00
```
### 3.在项目中使用
```
import MarkDown from 'vue-meditor'
...
components:{
MarkDown
}
...
<template>
<mark-down/>
</template>
```
### 4.props
名称 | 类型|说明|默认值
---|---|---|---
initialValue|String|编辑器初始化内容
width|Number|编辑器宽度|
height|Number|编辑器高度,单位 px|600
theme|String|代码块主题配置共有四个值分别为Light、Dark、OneDark、GitHub|Light
autoSave|Boolean|是否自动保存|true
interval|Number|自动保存频率,单位毫秒|10000
toolbars|Object|工具栏配置,具体功能详见工具栏功能配置表
exportFileName|String|导出文件的名称|未命名文件
2018-08-23 15:11:31 +08:00
### 5.events
名称 | 说明
---|---
on-save|自动保存或者手动保存时触发,返回当前编辑器内原始输入内容和转以后的内容
on-paste-image|粘贴图片返回当前粘贴的file文件
2018-08-23 15:11:31 +08:00
### 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 |打印|否
2018-08-23 15:11:31 +08:00
theme|主题切换|是
fullscreen |全屏|是
exportmd|导出为*.md文件|是
2018-11-06 09:07:41 +08:00
importmd|导入本地*.md文件|是
2018-08-23 15:11:31 +08:00
### 7.其他说明
**关于保存时返回值**
```
value // 编辑器输入的原始内容
html // 右侧现实的问转义后的内容
2018-08-23 15:11:31 +08:00
theme // 保存时的主题名字
```
**标题配置**
```
支持配置编辑器名称提供了name=title的slot插槽
```
2018-08-23 15:11:31 +08:00
**工具栏配置**
```
// 例:
const config = {
print:false // 隐藏掉打印功能
}
<MarkDown :toolbars="config"/>
```
**优化代码体积**
2018-08-23 15:11:31 +08:00
```
项目中为了达到代码高亮显示需要用到highlight.js,
由于highlight.js体积过于庞大项目中按需加载了部分常用的程序语言
可根据需求自行配置,配置目录位于/markdown/js/hljs内
```
2018-08-23 15:11:31 +08:00
### 更新日志
2018-08-23 15:11:31 +08:00
**v1.2.0**
1. 优化代码体积按需加载highlight.js较少了三分之二的代码体积
2. 新增图片粘贴功能
3. 增加图片预览功能
4. 修复部分bug
2018-08-23 15:11:31 +08:00
**v0.9.3**
2018-08-24 10:13:12 +08:00
1. 解决初始化值initialValue无法动态改变的问题
2. 修改了打包配置
2018-08-24 10:13:12 +08:00
**v0.8.0**
1. 新增md文件导出和读取功能
2. 修改预览部分样式
3. 修改头部菜单样式
**v0.7.0**
1. 修复主题无法更新的问题
2. 修复文档初始化值无法动态切换的问题