vue-markdown/docs/props.md

158 lines
3.2 KiB
Markdown
Raw Normal View History

## 编辑器基本属性
### value
- Type: `String/Number`
- Default: `''`
编辑器输入的文本,支持通过`v-dodel`数据双向绑定设置编辑器内容和获取编辑器的值。
### width
- Type: `String/Number`
- Default: `auto`
编辑器的初始化宽度。
### height
- Type: `Number`
- Default: `600`
编辑器的初始化高度。
### bordered
- Type: `Boolean`
- Default: `true`
编辑器是否含有边框。
### toolbars
- Type: `Object`
- Default: `参见下表`
头部菜单按钮通过设置true or false控制决定是否显示目前配置支持持控制按钮显示隐藏后续将支持根据配置显示排列顺序。
名称 | 说明 | 默认是否显示
---|---|---
strong|粗体|是
italic|斜体|是
overline |删除线|是
h1 |标题1|是
h2 |标题2|是
h3 |标题3|是
h4|标题4|否
h5 |标题5|否
h6 |标题6|否
hr |分割线|是
quote|引用|是
ul |无序列表|是
ol|有序列表|是
code |代码块|是
link |链接|是
image|image|是
2019-12-13 18:21:59 +08:00
uploadImage|本地图片|否
table |表格|是
checked|已完成列表|是
notChecked |未完成列表|是
preview|预览|是
split|分屏模式切换|是
print |打印|否
theme|主题切换|是
fullscreen |全屏|是
exportmd|导出为*.md文件|是
importmd|导入本地*.md文件|是
save|保存按钮|否
clear|清空内容|否
### theme
- Type: `String`
- Default: `light`
编辑器代码块主题,目前支持`light`、`dark`、`oneDark`、`gitHub`四种代码块风格可通过自定义theme并修改样式文件进行主题定制。
自定义theme时预览区域的会增加一个为`markdown-theme-[theme]`的`class`。
### autoSave
- Type: `Boolean`
- Default: `false`
是否开启自动保存,设置为开启时可通过绑定`on-save`事件获取编辑器内的值和代码块主题。
```vue
<Markdown @on-save="handleOnSave"/>
```
```js
handleOnSave({value, theme}){
console.log(value, theme);
}
```
### interval
- Type: `Number`
- Default: `10000`
自动保存间隔时间,单位:`mm`默认10000mm需要`autoSave = true`时才有效。
### exportFileName
- Type: `String`
- Default: `unnamed`
导出的md文件名称默认unnamed.md。
### markedOptions
- Type: `Object`
- Default: `{}`
marked配置项,可以根据需求自定义。
```vue
<Markdown :markedOptions="{baseUrl:'http://***.oss-cn-shanghai.aliyuncs.com/'}"/>
```
### isPreview
- Type: `Boolean`
- Default: `false`
是否是预览模式,开启时可作为一个预览组件使用,与预览组件功能一致。
### copyCode
- Type: `Boolean`
- Default: `true`
是否支持复制代码块内的内容。
### copyBtnText
- Type: `String`
- Default: `复制代码`
复制代码按钮显示文字。
## 预览组件基本属性
### initialValue
- Type: `String/Number`
- Default: `''`
预览组件初始化内容,支持动态更新。
### theme
- Type: `String`
- Default: `light`
代码块主题,与编辑器编辑器代码块主题一致。
### markedOptions
- Type: `Object`
- Default: `{}`
marked配置项,与编辑器内该配置一致。
### copyCode
- Type: `Boolean`
- Default: `true`
是否支持复制代码块内的内容。
### copyBtnText
- Type: `String`
- Default: `复制代码`
复制代码按钮显示文字。