md 工具栏命令配快捷键:⌘B 加粗 / ⌘I 斜体 / ⌘E 行内代码 / ⌘K 链接(CodeMirror keymap),tooltip 自动带出(Mod 在 Mac 显示 ⌘)
This commit is contained in:
@@ -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()"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user