fix: hotkey mod

wangeditor-team · Jun 30, 2021 · d480c20 · d480c20
1 parent dde2d80
commit d480c20
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/packages/core/src/editor/with-dom.ts b/packages/core/src/editor/with-dom.ts
@@ -306,8 +306,16 @@ export const withDOM = <T extends Editor>(editor: T) => {
 
   // scroll to elem
   e.scrollToElem = (id: string) => {
+    const { scroll } = e.getConfig()
+    if (!scroll) {
+      // 没有设置编辑区域滚动，则不能用
+      let info = '编辑器禁用了 scroll ，编辑器内容无法滚动，请自行实现该功能'
+      info += '\nYou has disabled editor scroll, please do this yourself'
+      console.warn(info)
+      return
+    }
+
     const $elem = $(`#${id}`)
-    console.log('$elem', $elem)
     if ($elem.length === 0) return
 
     const textarea = DomEditor.getTextarea(e)

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 { promiseResolveThen } from '../../utils/util'
+import { addTooltip } from './tooltip'
 
 abstract class BaseButton implements IBarItem {
   $elem: Dom7Array = $(`<div class="w-e-bar-item"></div>`)
@@ -23,10 +24,11 @@ abstract class BaseButton implements IBarItem {
     if (tag !== 'button') throw new Error(`Invalid tag '${tag}', expected 'button'`)
 
     // ----------------- 初始化 dom -----------------
-    const { title, hotkey, iconSvg } = menu
+    const { title, hotkey = '', iconSvg } = menu
     const $svg = $(iconSvg)
     clearSvgStyle($svg) // 清理 svg 样式（扩展的菜单，svg 是不可控的，所以要清理一下）
     const $button = $(`<button></button>`)
+    addTooltip($button, title, hotkey, inGroup) // 设置 tooltip
     $button.append($svg)
     if (inGroup) {
       // in groupButton ，显示 menu title
@@ -38,21 +40,6 @@ abstract class BaseButton implements IBarItem {
     this.$elem.append($button)
     this.$button = $button
 
-    // ----------------- 设置 tooltip -----------------
-    if (inGroup) {
-      // in groupButton ，tooltip 只显示 快捷键
-      if (hotkey) {
-        $button.attr('data-tooltip', hotkey)
-        $button.addClass('w-e-menu-tooltip')
-        $button.addClass('tooltip-right') // tooltip 显示在右侧
-      }
-    } else {
-      // 非 in groupButton ，正常实现 tooltip
-      const tooltip = hotkey ? `${title}\n${hotkey}` : title
-      $button.attr('data-tooltip', tooltip)
-      $button.addClass('w-e-menu-tooltip')
-    }
-
     // ----------------- 异步绑定事件 -----------------
     promiseResolveThen(() => this.init())
   }

diff --git a/packages/core/src/menus/bar-item/tooltip.ts b/packages/core/src/menus/bar-item/tooltip.ts
@@ -0,0 +1,28 @@
+/**
+ * @description tooltip 功能
+ * @author wangfupeng
+ */
+
+import { Dom7Array } from '../../utils/dom'
+import { IS_APPLE } from '../../utils/ua'
+
+export function addTooltip($button: Dom7Array, title: string, hotkey: string, inGroup = false) {
+  if (hotkey) {
+    const fnKey = IS_APPLE ? 'cmd' : 'ctrl' // mac OS 转换为 cmd ，windows 转换为 ctrl
+    hotkey = hotkey.replace('mod', fnKey)
+  }
+
+  if (inGroup) {
+    // in groupButton ，tooltip 只显示 快捷键
+    if (hotkey) {
+      $button.attr('data-tooltip', hotkey)
+      $button.addClass('w-e-menu-tooltip')
+      $button.addClass('tooltip-right') // tooltip 显示在右侧
+    }
+  } else {
+    // 非 in groupButton ，正常实现 tooltip
+    const tooltip = hotkey ? `${title}\n${hotkey}` : title
+    $button.attr('data-tooltip', tooltip)
+    $button.addClass('w-e-menu-tooltip')
+  }
+}