feat: toolbar config - insertKeys

wangeditor-team · Nov 10, 2021 · a2f3c4b · a2f3c4b
1 parent 1cd0829
commit a2f3c4b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/packages/core/src/config/index.ts b/packages/core/src/config/index.ts
@@ -52,6 +52,7 @@ export function genToolbarConfig(userConfig?: Partial<IToolbarConfig>): IToolbar
     // 默认配置
     toolbarKeys: [],
     excludeKeys: [],
+    insertKeys: { index: 0, keys: [] },
 
     // 合并用户配置
     ...(userConfig || {}),

diff --git a/packages/core/src/config/interface.ts b/packages/core/src/config/interface.ts
@@ -63,5 +63,6 @@ export interface IEditorConfig {
  */
 export interface IToolbarConfig {
   toolbarKeys: Array<string | IMenuGroup>
+  insertKeys: { index: number; keys: string | Array<string | IMenuGroup> }
   excludeKeys: Array<string> // 排除哪些菜单
 }
diff --git a/packages/core/src/menus/bar/Toolbar.ts b/packages/core/src/menus/bar/Toolbar.ts
@@ -63,7 +63,18 @@ class Toolbar {
   private registerItems() {
     let prevKey = ''
     const $toolbar = this.$toolbar
-    const { toolbarKeys = [], excludeKeys = [] } = this.config // 格式如 ['a', '|', 'b', 'c', '|', 'd']
+    const { toolbarKeys = [], insertKeys = { index: 0, keys: [] }, excludeKeys = [] } = this.config // 格式如 ['a', '|', 'b', 'c', '|', 'd']
+
+    // 新插入菜单
+    if (insertKeys.keys.length > 0) {
+      if (typeof insertKeys.keys === 'string') {
+        insertKeys.keys = [insertKeys.keys]
+      }
+
+      insertKeys.keys.forEach((k, i) => {
+        toolbarKeys.splice(insertKeys.index + i, 0, k)
+      })
+    }
 
     // 排除某些菜单
     const filteredKeys = toolbarKeys.filter(key => {

diff --git a/packages/editor/examples/menu.html b/packages/editor/examples/menu.html
@@ -94,8 +94,12 @@
           'redo',
           '|', // 最后一个是 `|` 不显示
         ],
+        // insertKeys: {
+        //   index: 5,
+        //   keys: ['insertImage', 'insertVideo']
+        // },
         // excludeKeys: ['headerSelect', 'underline', 'group-more-style', 'fontFamily']
-      }
+      },
     })
   </script>
 </body>