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,
|
doc: form.content_md,
|
||||||
extensions: [
|
extensions: [
|
||||||
history(),
|
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]),
|
keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
|
||||||
markdownLang(),
|
markdownLang(),
|
||||||
cmTheme,
|
cmTheme,
|
||||||
@@ -803,17 +809,26 @@ function insertDate() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 工具栏按钮的统一定义(用作 v-for 渲染)
|
// 工具栏按钮的统一定义(用作 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(() => [
|
const tbGroups = computed(() => [
|
||||||
{
|
{
|
||||||
label: '格式',
|
label: '格式',
|
||||||
items: [
|
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 },
|
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' },
|
icon: 'M19 4h-9M14 20H5M15 4L9 20' },
|
||||||
{ key: 's', title: '删除线', run: tbStrike, show: mode.value === 'md',
|
{ 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' },
|
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' },
|
icon: 'M16 18l6-6-6-6M8 6l-6 6 6 6' },
|
||||||
{ key: 'cb', title: '代码块', run: tbCodeBlock, show: mode.value === 'md',
|
{ 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' }
|
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: '插入',
|
label: '插入',
|
||||||
items: [
|
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' },
|
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',
|
{ 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' },
|
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"
|
:key="it.key"
|
||||||
type="button"
|
type="button"
|
||||||
class="tb-btn"
|
class="tb-btn"
|
||||||
:title="it.title"
|
:title="it.title + keyDisplay(it.shortcut)"
|
||||||
:aria-label="it.title"
|
:aria-label="it.title"
|
||||||
@click="it.run()"
|
@click="it.run()"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user