Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

doc: customize and add toolbar buttons #731

Merged
merged 1 commit into from
Nov 25, 2021
Merged

doc: customize and add toolbar buttons #731

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 51 additions & 4 deletions README-EN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,17 +125,18 @@ export default {
| xssOptions | Object | {} | xss rule configuration, enabled by default, set to false to turn off, custom rule reference [https://jsxss.com/zh/options.html](https://jsxss.com/zh/options.html) |
| toolbars | Object | As in the following example | toolbars |

#### toolbars
The default toolbar properties are all true, You can customize the object to cover them.
```javascript
/*
The default toolbar properties are all true,
You can customize the object to cover them.
eg: {
bold: true,
italic: true,
header: true,
}
At this point, the toolbar only displays the three function keys.
*/

toolbars: {
bold: true,
italic: true,
Expand Down Expand Up @@ -172,6 +173,52 @@ toolbars: {
preview: true
}
```

If you need to customize and add toolbar buttons, you can do the following:
```vue
<mavon-editor>
<!-- Add a custom button in front of the left toolbar -->
<template slot="left-toolbar-before">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="custom"
></button>
</template>
<!-- Add a custom button after the left toolbar -->
<template slot="left-toolbar-after">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="custom"
></button>
</template>
<!-- Add a custom button in front of the right toolbar -->
<template slot="right-toolbar-before">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="custom"
></button>
</template>
<!-- Add a custom button behind the right toolbar -->
<template slot="right-toolbar-after">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="custom"
></button>
</template>
</mavon-editor>
```
### events

| name | params | describe|
Expand All @@ -188,7 +235,7 @@ toolbars: {
| imgAdd | String: filename, File: imgfile | Add image file callback event(filename: write in origin md, File: File Object) |
| imgDel | String: filename | Delete image file callback event(filename: write in origin md) |

#### Hightlight
### Hightlight

> If you do not need code highlighting, you need set ishljs to false

Expand All @@ -211,7 +258,7 @@ The language parsing files and code highlighting in Code Highlighting `highlight
> [without cdn, Click here to local on-demand loading...](./doc/en/no-cnd.md)


#### Upload images
### Upload images

```javascript
<template>
Expand Down
53 changes: 50 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,16 +129,18 @@ export default {
| xssOptions | Object | {} | xss规则配置, 默认开启，设置false可以关闭，自定义规则参考 [https://jsxss.com/zh/options.html](https://jsxss.com/zh/options.html) |
| toolbars | Object | 如下例 | 工具栏 |

#### toolbars
默认工具栏按钮全部开启, 传入自定义对象，可以选择启用部分按钮
```javascript
/*
默认工具栏按钮全部开启, 传入自定义对象
例如: {
bold: true, // 粗体
italic: true,// 斜体
header: true,// 标题
}
此时, 仅仅显示此三个功能键
*/

toolbars: {
bold: true, // 粗体
italic: true, // 斜体
Expand Down Expand Up @@ -175,6 +177,51 @@ toolbars: {
preview: true, // 预览
}
```
如果需要自定义添加工具栏按钮，可以通过以下方式
```js
<mavon-editor>
<!-- 左工具栏前加入自定义按钮 -->
<template slot="left-toolbar-before">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="自定义"
></button>
</template>
<!-- 左工具栏后加入自定义按钮 -->
<template slot="left-toolbar-after">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="自定义"
></button>
</template>
<!-- 右工具栏前加入自定义按钮 -->
<template slot="right-toolbar-before">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="自定义"
></button>
</template>
<!-- 右工具栏后加入自定义按钮 -->
<template slot="right-toolbar-after">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="自定义"
></button>
</template>
</mavon-editor>
```

### events 事件绑定

Expand All @@ -192,7 +239,7 @@ toolbars: {
| imgAdd | String: filename, File: imgfile | 图片文件添加回调事件(filename: 写在md中的文件名, File: File Object) |
| imgDel | String: filename | 图片文件删除回调事件(filename: 写在md中的文件名) |

#### 代码高亮
### 代码高亮

> 如不需要hightlight代码高亮显示，你应该设置ishljs为false

Expand All @@ -215,7 +262,7 @@ toolbars: {

> [不使用cdn，本地按需加载点击这里...](./doc/cn/no-cnd.md)

#### 图片上传
### 图片上传

```javascript
<template>
Expand Down