fix: insertKeys

wangeditor-team · Jan 6, 2022 · 0a89420 · 0a89420
1 parent a87d4c6
commit 0a89420
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 16 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,6 +5,7 @@
       "bodyparser",
       "browserslist",
       "chmod",
+      "clonedeep",
       "compositionend",
       "compositionstart",
       "config",

diff --git a/packages/core/src/menus/bar/Toolbar.ts b/packages/core/src/menus/bar/Toolbar.ts
@@ -4,6 +4,7 @@
  */
 
 import debounce from 'lodash.debounce'
+import clonedeep from 'lodash.clonedeep'
 import $, { Dom7Array, DOMElement } from '../../utils/dom'
 import { MENU_ITEM_FACTORIES } from '../register'
 import { promiseResolveThen } from '../../utils/util'
@@ -66,18 +67,19 @@ class Toolbar {
     const { toolbarKeys = [], insertKeys = { index: 0, keys: [] }, excludeKeys = [] } = this.config // 格式如 ['a', '|', 'b', 'c', '|', 'd']
 
     // 新插入菜单
+    const toolbarKeysWithInsertedKeys = clonedeep(toolbarKeys)
     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)
+        toolbarKeysWithInsertedKeys.splice(insertKeys.index + i, 0, k)
       })
     }
 
     // 排除某些菜单
-    const filteredKeys = toolbarKeys.filter(key => {
+    const filteredKeys = toolbarKeysWithInsertedKeys.filter(key => {
       if (typeof key === 'string') {
         // 普通菜单
         if (excludeKeys.includes(key)) return false

diff --git a/packages/editor/examples/index.html b/packages/editor/examples/index.html
@@ -39,6 +39,7 @@ <h1>wangEditor examples</h1>
     <li><a href="./shadow-dom.html">Shadow DOM</a></li>
     <li><a href="./batch-destroy.html">Batch destroy, test memory leak 批量销毁，测试内存泄漏</a></li>
     <li><a href="./content-to-html.html">Content to html</a></li>
+    <li><a href="./new-menu.html">New menu 新注册菜单</a></li>
   </ul>
 </body>
 </html>
diff --git a/packages/editor/examples/new-menu.html b/packages/editor/examples/new-menu.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>New menu</title>
+  <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
+  <link href="./css/editor.css" rel="stylesheet">
+  <link href="../dist/css/style.css" rel="stylesheet">
+</head>
+<body>
+  <p>New menu</p>
+  <p>
+    <button id="btn-create">create editor</button>
+    <button id="btn-destroy">destroy editor</button>
+  </p>
+
+  <div>
+    <div id="editor-toolbar" class="editor-toolbar"></div>
+    <div id="editor-text-area" class="editor-text-area"></div>
+  </div>
+
+  <script src="js/init-content.js"></script>
+  <script src="../dist/index.js"></script>
+  <script>
+    const E = window.wangEditor
+
+    // ---------- 注册新菜单 start ----------
+    class MyButtonMenu {
+        constructor() {
+            this.title = 'menu1',
+            this.tag = 'button'
+        }
+        getValue() { return '' }
+        isActive() { return false }
+        isDisabled() { return false }
+        exec(editor) {
+            console.log(editor)
+            alert('menu1 exec')
+        }
+    }
+    const menuConf = {
+      key: 'my-menu-1', // menu key ，唯一。注册之后，需通过 toolbarKeys 配置到工具栏
+      factory() {
+        return new MyButtonMenu()
+      },
+    }
+    E.Boot.registerMenu(menuConf)
+    // ---------- 注册新菜单 end ----------
+
+    // editor 配置
+    const editorConfig = {
+      placeholder: '请输入内容...',
+      onChange(editor) {}
+    }
+
+    // toolbar 配置
+    const toolbarConfig = {
+        // toolbarKeys: ['headerSelect', 'bold', 'my-menu-1'],
+        // excludeKeys: [],
+        insertKeys: {
+            index: 3,
+            keys: 'my-menu-1'
+        }
+    }
+
+    let editor, toolbar
+
+    // create
+    document.getElementById('btn-create').addEventListener('click', () => {
+      editor = E.createEditor({
+        selector: '#editor-text-area',
+        config: editorConfig
+      })
+
+      toolbar = E.createToolbar({
+        editor,
+        selector: '#editor-toolbar',
+        config: toolbarConfig,
+      })
+    })
+
+    // destroy
+    document.getElementById('btn-destroy').addEventListener('click', () => {
+      editor.destroy()
+      editor = null
+    })
+  </script>
+</body>
+</html>
diff --git a/tests/units/editor/config/toolbar-config.test.ts b/tests/units/editor/config/toolbar-config.test.ts
@@ -50,18 +50,20 @@ describe('toolbar config', () => {
     expect(excludeKeys).toEqual(keys)
   })
 
-  it('if set insertKeys, it will insert key to specify position', done => {
-    const keys = ['headerSelect', 'italic']
-    const toolbar = createToolbar(editor, {
-      insertKeys: {
-        index: 8,
-        keys,
-      },
-    })
-    setTimeout(() => {
-      const { toolbarKeys = [] } = toolbar.getConfig()
-      expect(toolbarKeys.slice(8, 8 + keys.length)).toEqual(keys)
-      done()
-    })
-  })
+  // // 这里先注释掉 - wangfupeng 2022.01.06
+  // // 因为 insertKeys 不应该修改 toolbarKeys 的值，还因此引发了一个 bug wangEditor-v5/issues/330
+  // it('if set insertKeys, it will insert key to specify position', done => {
+  //   const keys = ['headerSelect', 'italic']
+  //   const toolbar = createToolbar(editor, {
+  //     insertKeys: {
+  //       index: 8,
+  //       keys,
+  //     },
+  //   })
+  //   setTimeout(() => {
+  //     const { toolbarKeys = [] } = toolbar.getConfig()
+  //     expect(toolbarKeys.slice(8, 8 + keys.length)).toEqual(keys)
+  //     done()
+  //   })
+  // })
 })