vue-markdown/README.md

153 lines
3.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# vue-Markdown编辑器
[在线示例地址](https://zhaoxuhui1122.github.io/vue-markdown/)
GitHub :[https://github.com/zhaoxuhui1122/vue-markdown]( https://github.com/zhaoxuhui1122/vue-markdown)
### 1.简介
**一款使用marked和highlight.js开发的一款markdown编辑器目前只支持在vue项目中使用。**
**编辑器涵盖了常用的markdown编辑器功能工具栏可自定义配置也可进行二次开发。**
**效果**
![image](http://smalleyes.oss-cn-shanghai.aliyuncs.com/WechatIMG586.png)
### 2.安装
```
npm i -S vue-meditor
直接复制对应的组件到项目目录内 (推荐)
```
### 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|导出文件的名称|未命名文件
### 5.events
名称 | 说明
---|---
on-save|自动保存或者手动保存时触发,返回当前编辑器内原始输入内容和转以后的内容
on-paste-image|粘贴图片返回当前粘贴的file文件
### 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|导入本地*.md文件|是
### 7.其他说明
**关于保存时返回值**
```
value // 编辑器输入的原始内容
html // 右侧现实的问转义后的内容
theme // 保存时的主题名字
```
**标题配置**
```
支持配置编辑器名称提供了name=title的slot插槽
```
**工具栏配置**
```
// 例:
const config = {
print:false // 隐藏掉打印功能
}
<MarkDown :toolbars="config"/>
```
**优化代码体积**
```
项目中为了达到代码高亮显示需要用到highlight.js,
由于highlight.js体积过于庞大项目中按需加载了部分常用的程序语言
可根据需求自行配置,配置目录位于/markdown/js/hljs内
```
### 更新日志
**v1.2.0**
1. 优化代码体积按需加载highlight.js较少了三分之二的代码体积
2. 新增图片粘贴功能
3. 增加图片预览功能
4. 修复部分bug
**v0.9.3**
1. 解决初始化值initialValue无法动态改变的问题
2. 修改了打包配置
**v0.8.0**
1. 新增md文件导出和读取功能
2. 修改预览部分样式
3. 修改头部菜单样式
**v0.7.0**
1. 修复主题无法更新的问题
2. 修复文档初始化值无法动态切换的问题