doc: customize and add toolbar buttons

jiawulin001 · Nov 24, 2021 · cd409d9 · cd409d9
1 parent 5f23e0b
commit cd409d9
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 7 deletions.
diff --git a/README-EN.md b/README-EN.md
@@ -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,
@@ -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|
@@ -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
 
@@ -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>

diff --git a/README.md b/README.md
@@ -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, // 斜体
@@ -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 事件绑定
 
@@ -192,7 +239,7 @@ toolbars: {
 | imgAdd           | String: filename, File: imgfile | 图片文件添加回调事件(filename: 写在md中的文件名, File: File Object) |
 | imgDel           |        String: filename         | 图片文件删除回调事件(filename: 写在md中的文件名)          |
 
-#### 代码高亮
+### 代码高亮
 
 > 如不需要hightlight代码高亮显示，你应该设置ishljs为false
 
@@ -215,7 +262,7 @@ toolbars: {
 
 > [不使用cdn，本地按需加载点击这里...](./doc/cn/no-cnd.md)
 
-#### 图片上传
+### 图片上传
 
 ```javascript
 <template>