feat: toolbar excludeKeys

wangeditor-team · Jul 16, 2021 · 09bd196 · 09bd196
1 parent d27034c
commit 09bd196
Show file tree

Hide file tree

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

diff --git a/packages/core/src/config/interface.ts b/packages/core/src/config/interface.ts
@@ -57,5 +57,6 @@ export interface IEditorConfig {
  * toolbar config
  */
 export interface IToolbarConfig {
-  toolbarKeys?: Array<string | IMenuGroup>
+  toolbarKeys: Array<string | IMenuGroup>
+  excludeKeys: Array<string> // 排除哪些菜单
 }
diff --git a/packages/core/src/menus/bar/Toolbar.ts b/packages/core/src/menus/bar/Toolbar.ts
@@ -21,9 +21,9 @@ class Toolbar {
   private readonly $toolbar: Dom7Array = $(`<div class="w-e-bar w-e-bar-show w-e-toolbar"></div>`)
   private menus: { [key: string]: MenuType } = {}
   private toolbarItems: IBarItem[] = []
-  private config: IToolbarConfig = {}
+  private config: Partial<IToolbarConfig> = {}
 
-  constructor(selector: string | DOMElement, config: IToolbarConfig) {
+  constructor(selector: string | DOMElement, config: Partial<IToolbarConfig>) {
     this.config = config
 
     // @ts-ignore 初始化 DOM
@@ -59,24 +59,40 @@ class Toolbar {
 
   // 注册 toolbarItems
   private registerItems() {
+    let prevKey = ''
     const $toolbar = this.$toolbar
-    const { toolbarKeys = [] } = this.config // 格式如 ['a', '|', 'b', 'c', '|', 'd']
+    const { toolbarKeys = [], excludeKeys = [] } = this.config // 格式如 ['a', '|', 'b', 'c', '|', 'd']
     toolbarKeys.forEach(key => {
+      // 排除某些菜单
+      if (typeof key === 'string') {
+        // 普通菜单
+        if (excludeKeys.includes(key)) return
+      } else {
+        // group
+        if (excludeKeys.includes(key.key)) return
+      }
+
       if (key === '|') {
+        // 多个紧挨着的 `|` ，只显示一个
+        if (prevKey === '|') return
+
         // 分割线
         const $divider = gen$barItemDivider()
         $toolbar.append($divider)
+        prevKey = key
         return
       }
 
       // 正常菜单
       if (typeof key === 'string') {
         this.registerSingleItem(key, this)
+        prevKey = key
         return
       }
 
       // 菜单组
       this.registerGroup(key)
+      prevKey = 'group'
     })
   }
 

diff --git a/packages/core/src/menus/interface.ts b/packages/core/src/menus/interface.ts
@@ -8,6 +8,7 @@ import { IDomEditor } from '../editor/interface'
 import { Dom7Array } from '../utils/dom'
 
 export interface IMenuGroup {
+  key: string
   title: string
   iconSvg?: string
   menuKeys: string[]

diff --git a/packages/editor/examples/menu.html b/packages/editor/examples/menu.html
@@ -71,11 +71,16 @@
         toolbarKeys: [
           'headerSelect',
           'blockquote',
-          '|',
+          '|', '|', '|', // 多个紧挨者的 `|` 只显示一个
           'bold',
           'underline',
           'italic',
-          'through',
+          {
+            key: 'group-more-style', // 以 group 开头
+            title: '更多样式',
+            iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
+            menuKeys: ['through', 'code'],
+          },
           'color',
           'bgColor',
           'clearStyle',
@@ -86,7 +91,8 @@
           '|',
           'undo',
           'redo',
-        ]
+        ],
+        // excludeKeys: ['headerSelect', 'underline', 'group-more-style', 'fontFamily']
       }
     })
   </script>

diff --git a/packages/editor/src/init-default-config/config/toolbar.ts b/packages/editor/src/init-default-config/config/toolbar.ts
@@ -17,6 +17,7 @@ export function genDefaultToolbarKeys() {
     'underline',
     'italic',
     {
+      key: 'group-more-style', // 以 group 开头
       title: '更多样式',
       iconSvg: MORE_SVG,
       menuKeys: ['through', 'code', 'clearStyle'],
@@ -31,11 +32,13 @@ export function genDefaultToolbarKeys() {
     'bulletedList',
     'numberedList',
     {
+      key: 'group-justify', // 以 group 开头
       title: '对齐',
       iconSvg: JUSTIFY_LEFT_SVG,
       menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter'],
     },
     {
+      key: 'group-indent', // 以 group 开头
       title: '缩进',
       iconSvg: INDENT_RIGHT_SVG,
       menuKeys: ['indent', 'delIndent'],
@@ -47,6 +50,7 @@ export function genDefaultToolbarKeys() {
     // 'unLink',
     // 'viewLink',
     {
+      key: 'group-image', // 以 group 开头
       title: '图片',
       iconSvg: IMAGE_SVG,
       menuKeys: ['insertImage', 'uploadImage'],
@@ -90,6 +94,7 @@ export function genSimpleToolbarKeys() {
     '|',
     'insertLink',
     {
+      key: 'group-image', // 以 group 开头
       title: '图片',
       iconSvg: IMAGE_SVG,
       menuKeys: ['insertImage', 'uploadImage'],