md 工具栏命令配快捷键:⌘B 加粗 / ⌘I 斜体 / ⌘E 行内代码 / ⌘K 链接(CodeMirror keymap),tooltip 自动带出(Mod 在 Mac 显示 ⌘)

This commit is contained in:
Sakurasan
2026-09-29 00:36:22 +08:00
parent 55d898cd42
commit 44a24736aa
+20 -5
View File
@@ -458,6 +458,12 @@ function mountCM() {
doc: form.content_md,
extensions: [
history(),
keymap.of([
{ key: 'Mod-b', run: () => { tbBold(); return true } },
{ key: 'Mod-i', run: () => { tbItalic(); return true } },
{ key: 'Mod-e', run: () => { tbCode(); return true } },
{ key: 'Mod-k', run: () => { openLink(); return true } }
]),
keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
markdownLang(),
cmTheme,
@@ -803,17 +809,26 @@ function insertDate() {
}
// 工具栏按钮的统一定义(用作 v-for 渲染)
// 快捷键的展示形态(xLog 同款):Mod 在 Mac 上显示 ⌘,其余显示 Ctrl
const isMac = typeof navigator !== 'undefined' && /Mac|iP(hone|ad|od)/.test(navigator.platform || '')
function keyDisplay(shortcut) {
if (!shortcut) return ''
return '(' + shortcut
.replace('Mod', isMac ? '⌘' : 'Ctrl')
.replace(/-([a-z])$/i, (_, c) => c.toUpperCase()) + ')'
}
const tbGroups = computed(() => [
{
label: '格式',
items: [
{ key: 'b', title: '加粗', run: tbBold, show: mode.value === 'md',
{ key: 'b', title: '加粗', shortcut: 'Mod-b', run: tbBold, show: mode.value === 'md',
icon: 'M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z', fill: true },
{ key: 'i', title: '斜体', run: tbItalic, show: mode.value === 'md',
{ key: 'i', title: '斜体', shortcut: 'Mod-i', run: tbItalic, show: mode.value === 'md',
icon: 'M19 4h-9M14 20H5M15 4L9 20' },
{ key: 's', title: '删除线', run: tbStrike, show: mode.value === 'md',
icon: 'M16 4H9a3 3 0 0 0-2.83 4M14 12a4 4 0 0 1 0 8H6M4 12h16' },
{ key: 'code', title: '行内代码', run: tbCode, show: mode.value === 'md',
{ key: 'code', title: '行内代码', shortcut: 'Mod-e', run: tbCode, show: mode.value === 'md',
icon: 'M16 18l6-6-6-6M8 6l-6 6 6 6' },
{ key: 'cb', title: '代码块', run: tbCodeBlock, show: mode.value === 'md',
icon: 'M9 10l-2 2.5L9 15M15 10l2 2.5-2 2.5M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z' }
@@ -839,7 +854,7 @@ const tbGroups = computed(() => [
{
label: '插入',
items: [
{ key: 'link', title: '链接', run: openLink, show: mode.value === 'md',
{ key: 'link', title: '链接', shortcut: 'Mod-k', run: openLink, show: mode.value === 'md',
icon: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' },
{ key: 'img', title: '图片', run: openImage, show: mode.value === 'md',
icon: 'M21 15l-5-5L5 21M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM8.5 8.5h.01' },
@@ -918,7 +933,7 @@ const tbGroups = computed(() => [
:key="it.key"
type="button"
class="tb-btn"
:title="it.title"
:title="it.title + keyDisplay(it.shortcut)"
:aria-label="it.title"
@click="it.run()"
>