From 67452e9b456f8f54b4d8d32975e033d0984cae11 Mon Sep 17 00:00:00 2001 From: GreatZP Date: Wed, 11 Dec 2024 11:37:42 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9E=84=E5=BB=BA?= =?UTF-8?q?=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98=20(#1925)=20(#1926)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/composables/use-editor-md.ts | 4 +- .../devui/editor-md/src/toolbar-config.ts | 76 ++++++++++--------- 2 files changed, 44 insertions(+), 36 deletions(-) diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts index a6655aaf46..d3ae10bb75 100644 --- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts +++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts @@ -2,7 +2,7 @@ import cloneDeep from 'lodash/cloneDeep'; import { computed, nextTick, onMounted, reactive, Ref, ref, SetupContext, toRefs, watch, onBeforeUnmount } from 'vue'; import { debounce } from '../../../shared/utils'; import { EditorMdProps, Mode } from '../editor-md-types'; -import { ALT_KEY, DEFAULT_TOOLBARS } from '../toolbar-config'; +import { DEFAULT_TOOLBARS, GET_ALT_KEY } from '../toolbar-config'; import { parseHTMLStringToDomList } from '../utils'; import { refreshEditorCursor, _enforceMaxLength } from './helper'; import { throttle } from 'lodash'; @@ -326,7 +326,7 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { keyCombination += '⌘-'; } if (e.altKey) { - keyCombination += `${ALT_KEY}-`; + keyCombination += `${GET_ALT_KEY()}-`; } if (e.shiftKey) { keyCombination += 'Shift-'; diff --git a/packages/devui-vue/devui/editor-md/src/toolbar-config.ts b/packages/devui-vue/devui/editor-md/src/toolbar-config.ts index bc4b0c665c..db6d152781 100644 --- a/packages/devui-vue/devui/editor-md/src/toolbar-config.ts +++ b/packages/devui-vue/devui/editor-md/src/toolbar-config.ts @@ -278,8 +278,16 @@ class ToolBarHandler { static color = (): void => {}; } -export const CTRL_KEY = navigator?.platform?.indexOf('Mac') !== -1 ? '⌘' : 'Ctrl'; -export const ALT_KEY = navigator?.platform?.indexOf('Mac') !== -1 ? '⌥' : 'Alt'; +export const GET_CTRL_KEY = () => { + if (typeof window !== 'undefined') { + return navigator?.platform?.indexOf('Mac') !== -1 ? '⌘' : 'Ctrl'; + } +} +export const GET_ALT_KEY = () => { + if (typeof window !== 'undefined') { + return navigator?.platform?.indexOf('Mac') !== -1 ? '⌥' : 'Alt'; + } +} export const DEFAULT_TOOLBARS: Record = { undo: { @@ -287,8 +295,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'undo', type: 'button', icon: UNDO_ICON, - shortKey: `${CTRL_KEY}+Z`, - shortKeyWithCode: `${CTRL_KEY}+90`, + shortKey: `${GET_CTRL_KEY()}+Z`, + shortKeyWithCode: `${GET_CTRL_KEY()}+90`, handler: ToolBarHandler.undo, }, redo: { @@ -296,8 +304,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'redo', type: 'button', icon: REDO_ICON, - shortKey: `${CTRL_KEY}+Y`, - shortKeyWithCode: `${CTRL_KEY}+89`, + shortKey: `${GET_CTRL_KEY()}+Y`, + shortKeyWithCode: `${GET_CTRL_KEY()}+89`, handler: ToolBarHandler.redo, }, bold: { @@ -305,8 +313,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'bold', type: 'button', icon: BOLD_ICON, - shortKey: `${CTRL_KEY}+B`, - shortKeyWithCode: `${CTRL_KEY}+66`, + shortKey: `${GET_CTRL_KEY()}+B`, + shortKeyWithCode: `${GET_CTRL_KEY()}+66`, handler: ToolBarHandler.bold, }, italic: { @@ -314,8 +322,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'italic', type: 'button', icon: ITALIC_ICON, - shortKey: `${CTRL_KEY}+I`, - shortKeyWithCode: `${CTRL_KEY}+73`, + shortKey: `${GET_CTRL_KEY()}+I`, + shortKeyWithCode: `${GET_CTRL_KEY()}+73`, handler: ToolBarHandler.italic, }, strike: { @@ -323,8 +331,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'strike', type: 'button', icon: STRIKE_ICON, - shortKey: `${CTRL_KEY}+D`, - shortKeyWithCode: `${CTRL_KEY}+68`, + shortKey: `${GET_CTRL_KEY()}+D`, + shortKeyWithCode: `${GET_CTRL_KEY()}+68`, handler: ToolBarHandler.strike, }, h1: { @@ -332,8 +340,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'h1', type: 'button', icon: H1_ICON, - shortKey: `${CTRL_KEY}+1`, - shortKeyWithCode: `${CTRL_KEY}+49`, + shortKey: `${GET_CTRL_KEY()}+1`, + shortKeyWithCode: `${GET_CTRL_KEY()}+49`, handler: ToolBarHandler.h1, }, h2: { @@ -341,8 +349,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'h2', type: 'button', icon: H2_ICON, - shortKey: `${CTRL_KEY}+2`, - shortKeyWithCode: `${CTRL_KEY}+50`, + shortKey: `${GET_CTRL_KEY()}+2`, + shortKeyWithCode: `${GET_CTRL_KEY()}+50`, handler: ToolBarHandler.h2, }, ul: { @@ -350,8 +358,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'unorderedlist', type: 'button', icon: LIST_UNORDERED_ICON, - shortKey: `${CTRL_KEY}+U`, - shortKeyWithCode: `${CTRL_KEY}+85`, + shortKey: `${GET_CTRL_KEY()}+U`, + shortKeyWithCode: `${GET_CTRL_KEY()}+85`, handler: ToolBarHandler.ul, }, ol: { @@ -359,8 +367,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'orderedlist', type: 'button', icon: LIST_ORDERED_ICON, - shortKey: `${CTRL_KEY}+O`, - shortKeyWithCode: `${CTRL_KEY}+79`, + shortKey: `${GET_CTRL_KEY()}+O`, + shortKeyWithCode: `${GET_CTRL_KEY()}+79`, handler: ToolBarHandler.ol, }, checklist: { @@ -368,8 +376,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'checklist', type: 'button', icon: LIST_CHECK_ICON, - shortKey: `${CTRL_KEY}+${ALT_KEY}+C`, - shortKeyWithCode: `${CTRL_KEY}+${ALT_KEY}+67`, + shortKey: `${GET_CTRL_KEY()}+${GET_ALT_KEY()}+C`, + shortKeyWithCode: `${GET_CTRL_KEY()}+${GET_ALT_KEY()}+67`, handler: ToolBarHandler.checkList, }, underline: { @@ -377,8 +385,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'underline', type: 'button', icon: UNDERLINE_ICON, - shortKey: `${CTRL_KEY}+R`, - shortKeyWithCode: `${CTRL_KEY}+82`, + shortKey: `${GET_CTRL_KEY()}+R`, + shortKeyWithCode: `${GET_CTRL_KEY()}+82`, handler: ToolBarHandler.underline, }, font: { @@ -394,8 +402,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'link', type: 'button', icon: LINK_ICON, - shortKey: `${CTRL_KEY}+L`, - shortKeyWithCode: `${CTRL_KEY}+76`, + shortKey: `${GET_CTRL_KEY()}+L`, + shortKeyWithCode: `${GET_CTRL_KEY()}+76`, handler: ToolBarHandler.link, }, image: { @@ -403,8 +411,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'image', type: 'button', icon: IMAGE_ICON, - shortKey: `${CTRL_KEY}+G`, - shortKeyWithCode: `${CTRL_KEY}+71`, + shortKey: `${GET_CTRL_KEY()}+G`, + shortKeyWithCode: `${GET_CTRL_KEY()}+71`, params: { imageUploadToServer: false }, handler: ToolBarHandler.image, }, @@ -414,8 +422,8 @@ export const DEFAULT_TOOLBARS: Record = { type: 'button', icon: FILE_ICON, params: {}, - shortKey: `${CTRL_KEY}+F`, - shortKeyWithCode: `${CTRL_KEY}+70`, + shortKey: `${GET_CTRL_KEY()}+F`, + shortKeyWithCode: `${GET_CTRL_KEY()}+70`, handler: ToolBarHandler.file, }, code: { @@ -423,8 +431,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'code', type: 'button', icon: CODE_ICON, - shortKey: `${CTRL_KEY}+K`, - shortKeyWithCode: `${CTRL_KEY}+75`, + shortKey: `${GET_CTRL_KEY()}+K`, + shortKeyWithCode: `${GET_CTRL_KEY()}+75`, handler: ToolBarHandler.code, }, table: { @@ -432,8 +440,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'table', type: 'button', icon: TABLE_ICON, - shortKey: `${CTRL_KEY}+${ALT_KEY}+T`, - shortKeyWithCode: `${CTRL_KEY}+${ALT_KEY}+84`, + shortKey: `${GET_CTRL_KEY()}+${GET_ALT_KEY()}+T`, + shortKeyWithCode: `${GET_CTRL_KEY()}+${GET_ALT_KEY()}+84`, handler: ToolBarHandler.table, }, fullscreen: {