fix: menu 点击多次才能生效

wangeditor-team · Jun 25, 2021 · 6497e39 · 6497e39
1 parent a3e4cdc
commit 6497e39
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 11 deletions.
diff --git a/examples/like-yuque.html b/examples/like-yuque.html
@@ -24,10 +24,9 @@
     }
 
     #editor-toolbar {
-      width: 1310px;
+      width: 1300px;
       background-color: #FCFCFC;
       margin: 0 auto;
-      border-bottom: 1px solid #e8e8e8;
     }
 
     #content {
@@ -80,7 +79,7 @@
       文章标题信息
     </p>
   </div>
-  <div>
+  <div style="border-bottom: 1px solid #e8e8e8;">
     <div id="editor-toolbar"></div>
   </div>
   <div id="content">

diff --git a/packages/core/src/assets/textarea.less b/packages/core/src/assets/textarea.less
@@ -5,7 +5,7 @@
 }
 
 .w-e-text-container .w-e-scroll {
-  min-height: 40px;
+  min-height: 300px; //【注意】高度太小了 modal hoverbar 的定位会有问题
   height: 100%;
   // overflow-y: auto; // 在 js 中设置，根据 config 判断是否增加 scroll
   -webkit-overflow-scrolling: touch;

diff --git a/packages/core/src/menus/bar-item/BaseButton.ts b/packages/core/src/menus/bar-item/BaseButton.ts
@@ -8,6 +8,7 @@ import $, { Dom7Array } from '../../utils/dom'
 import { IBarItem, getEditorInstance } from './index'
 import { clearSvgStyle } from '../helpers/helpers'
 import { hideAllPanelsAndModals } from '../panel-and-modal/index'
+import { promiseResolveThen } from '../../utils/util'
 
 abstract class BaseButton implements IBarItem {
   $elem: Dom7Array = $(`<div class="w-e-bar-item"></div>`)
@@ -35,9 +36,12 @@ abstract class BaseButton implements IBarItem {
 
     this.$button = $button
     this.menu = menu
+
+    // 异步绑定事件
+    promiseResolveThen(() => this.init())
   }
 
-  init() {
+  private init() {
     // 设置 button 属性
     this.setActive()
     this.setDisabled()

diff --git a/packages/core/src/menus/bar-item/Select.ts b/packages/core/src/menus/bar-item/Select.ts
@@ -10,6 +10,7 @@ import SelectList from './SelectList'
 import { gen$downArrow } from '../helpers/helpers'
 import { hideAllPanelsAndModals } from '../panel-and-modal/index'
 import { DomEditor } from '../../editor/dom-editor'
+import { promiseResolveThen } from '../../utils/util'
 
 // 根据 option value 获取 text
 function getOptionText(options: IOption[], value: string): string {
@@ -46,9 +47,12 @@ class BarItemSelect implements IBarItem {
 
     this.$button = $button
     this.menu = menu
+
+    // 异步绑定事件
+    promiseResolveThen(() => this.init())
   }
 
-  init() {
+  private init() {
     // 设置 select 属性
     this.setSelectedValue()
 

diff --git a/packages/core/src/menus/bar-item/index.ts b/packages/core/src/menus/bar-item/index.ts
@@ -18,7 +18,6 @@ type MenuType = IButtonMenu | ISelectMenu | IDropPanelMenu | IModalMenu
 export interface IBarItem {
   $elem: Dom7Array
   menu: MenuType
-  init: () => void
   onSelectionChange: () => void
 }
 

diff --git a/packages/core/src/menus/bar/HoverBar.ts b/packages/core/src/menus/bar/HoverBar.ts
@@ -94,7 +94,6 @@ class HoverBar {
 
     // 保存 barItem 和 editor 的关系
     BAR_ITEM_TO_EDITOR.set(barItem, editor)
-    barItem.init() // 初始化
 
     // 添加 DOM
     const $elem = this.$elem

diff --git a/packages/core/src/menus/bar/Toolbar.ts b/packages/core/src/menus/bar/Toolbar.ts
@@ -112,7 +112,6 @@ class Toolbar {
 
     // 保存 toolbarItem 和 editor 的关系
     BAR_ITEM_TO_EDITOR.set(toolbarItem, editor)
-    toolbarItem.init() // 初始化
 
     // 添加 DOM
     $container.append(toolbarItem.$elem)

diff --git a/packages/editor/src/constants/svg.ts b/packages/editor/src/constants/svg.ts
@@ -20,3 +20,7 @@ export const JUSTIFY_LEFT_SVG =
 // 图片
 export const IMAGE_SVG =
   '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>'
+
+// plus
+export const PLUS_SVG =
+  '<svg viewBox="0 0 1024 1024"><path d="M512 0c282.7776 0 512 229.2224 512 512s-229.2224 512-512 512S0 794.7776 0 512 229.2224 0 512 0z m0 76.8C271.6416 76.8 76.8 271.6416 76.8 512s194.8416 435.2 435.2 435.2 435.2-194.8416 435.2-435.2S752.3584 76.8 512 76.8z m0 204.8a38.4 38.4 0 0 1 38.4 38.4v153.6h153.6a38.4 38.4 0 0 1 0 76.8h-153.6v153.6a38.4 38.4 0 0 1-76.8 0v-153.6h-153.6a38.4 38.4 0 0 1 0-76.8h153.6v-153.6A38.4 38.4 0 0 1 512 281.6z"></path></svg>'
diff --git a/packages/editor/src/editor-config.ts b/packages/editor/src/editor-config.ts
@@ -5,7 +5,7 @@
 
 import { Node, Text, Editor, Range } from 'slate'
 import { IDomEditor } from '@wangeditor/core'
-import { INDENT_RIGHT_SVG, JUSTIFY_LEFT_SVG, IMAGE_SVG } from './constants/svg'
+import { INDENT_RIGHT_SVG, JUSTIFY_LEFT_SVG, IMAGE_SVG, PLUS_SVG } from './constants/svg'
 
 function getDefaultEditorConfig() {
   return {
@@ -19,6 +19,11 @@ function getDefaultEditorConfig() {
       'italic',
       'through',
       'code',
+      {
+        title: '更多样式',
+        iconSvg: PLUS_SVG,
+        menuKeys: ['through', 'code'],
+      },
       '|',
       'color',
       'bgColor',
@@ -82,7 +87,7 @@ function getDefaultEditorConfig() {
           if (Text.isText(n)) return true // 匹配 text node
           return false
         },
-        menuKeys: ['header', '|', 'bold', 'underline', '|', 'color'],
+        menuKeys: ['header', '|', 'bold', 'underline', 'through', '|', 'color'],
       },
       // link hover bar
       {