diff --git a/packages/core/src/editor/with-dom.ts b/packages/core/src/editor/with-dom.ts index cdba6a019..94f7400ae 100644 --- a/packages/core/src/editor/with-dom.ts +++ b/packages/core/src/editor/with-dom.ts @@ -306,8 +306,16 @@ export const withDOM = (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 index fbd0527dd..c42a2d0af 100644 --- 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 = $(`
`) @@ -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 = $(``) + 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 new file mode 100644 index 000000000..d44b1a28b --- /dev/null +++ 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') + } +}