tinymce编辑器增加快捷键（感谢通义千问） - 开发

tinymce编辑器增加快捷键（感谢通义千问）

Tillreetree 版主发布于 13小时前

太棒了！你已经有一个非常完整、成熟的 TinyMCE 配置，而且结构清晰，功能丰富。现在你想**恢复 WordPress 风格的快捷键行为**（比如 `Alt + Shift + 3` 插入 H3 标题、`Alt + Shift + Q` 插入引用等），那我们只需要在你的配置中加入一段 **TinyMCE 快捷键绑定代码**。

---

## 我将为你添加如下快捷键（WordPress 风格）：

| 快捷键 | 功能 | 原始描述 |
|--------|------|----------|
| `Alt + Shift + c` | 居中对齐 | `居中对齐` |
| `Alt + Shift + l` | 左对齐 | `左对齐` |
| `Alt + Shift + r` | 右对齐 | `右对齐` |
| `Alt + Shift + j` | 两端对齐 | `文本左右对齐` |
| `Alt + Shift + d` | 删除线 | `删除线` |
| `Alt + Shift + u` | 无序列表 | `• 列表` |
| `Alt + Shift + o` | 有序列表 | `1. 列表` |
| `Alt + Shift + a` | 插入链接 | `插入链接` |
| `Alt + Shift + s` | 移除链接 | `移除链接` |
| `Alt + Shift + q` | 引用 | `引用` |
| `Alt + Shift + m` | 插入图片 | `插入图像` |
| `Alt + Shift + t` | 插入 `` 标签 | `插入“More”标签` |
| `Alt + Shift + p` | 插入分页标签 | `插入分页标签` |
| `Alt + Shift + w` | 全屏写作模式 | `全屏写作模式` |
| `Alt + Shift + h` | 打开帮助弹窗 | `帮助` |
| `Alt + Shift + n` | 拼写检查（模拟） | `拼写检查` |
| `Alt + Shift + 9` | 插入地址标签（address） | `地址` |
| `Ctrl/Cmd + 数字 1~6` | 插入对应标题 | `1=一级标题...6=六级标题` |
| `Alt + Shift + 数字 1~6` | 同上 | WordPress 风格 |

---

## 修改后的配置：只需添加 `setup` 函数部分

下面是你要替换或添加的部分：

```js
setup: function (editor) {
const addShortcut = (key, desc, cmd) => {
editor.shortcuts.add(key, desc, typeof cmd === 'function' ? cmd : () => editor.execCommand(cmd));
};

// 标题快捷键 Ctrl/Cmd + 1~6 和 Alt+Shift+1~6
for (let i = 1; i <= 6; i++) {
addShortcut('Meta+' + i, 'Insert H' + i + ' heading', () => editor.formatter.apply('h' + i));
addShortcut('Alt+Shift+' + i, 'Insert H' + i + ' heading', () => editor.formatter.apply('h' + i));
}

// 地址标签 <address>
addShortcut('Alt+Shift+9', 'Insert Address Tag', () => editor.formatter.apply('address'));

// 对齐方式
addShortcut('Alt+Shift+l', 'Left Align', 'JustifyLeft');
addShortcut('Alt+Shift+r', 'Right Align', 'JustifyRight');
addShortcut('Alt+Shift+c', 'Center Align', 'JustifyCenter');
addShortcut('Alt+Shift+j', 'Justify Align', 'JustifyFull');

// 删除线
addShortcut('Alt+Shift+d', 'Strikethrough', 'Strikethrough');

// 列表
addShortcut('Alt+Shift+u', 'Unordered List', 'InsertUnorderedList');
addShortcut('Alt+Shift+o', 'Ordered List', 'InsertOrderedList');

// 插入/移除链接
addShortcut('Alt+Shift+a', 'Insert Link', 'mceLink');
addShortcut('Alt+Shift+s', 'Remove Link', 'unlink');

// 引用
addShortcut('Alt+Shift+q', 'Blockquote', 'mceBlockQuote');

// 图片
addShortcut('Alt+Shift+m', 'Insert Image', 'mceImage');

// More 标签（自定义）
addShortcut('Alt+Shift+t', 'Insert ', () => editor.insertContent(''));

// 分页标签（pagebreak）
addShortcut('Alt+Shift+p', 'Insert Page Break', 'mcePageBreak');

// 全屏模式
addShortcut('Alt+Shift+w', 'Fullscreen Mode', 'mceFullScreen');

// 帮助
addShortcut('Alt+Shift+h', 'Open Help Dialog', 'mceHelp');

// 拼写检查（模拟）
addShortcut('Alt+Shift+n', 'Spell Check', () => alert('拼写检查功能未启用'));
}
```

---

## 将这段代码加到你原来的 `tinymce.init({ ... })` 中即可：

```js
tinymce.init({
// ...其他配置...

setup: function (editor) {
// 上面那段 setup 函数的内容放在这里
},

// ...其他配置...
});
```

---

## 补充建议：

- 如果你使用的是较新的 TinyMCE 版本（v6+），可以考虑使用 `editor.commands.addCommand()` 或者 `editor.ui.registry.addMenuItem()` 来更精细地控制行为。
- 如果你需要支持中文输入法下也能触发快捷键，记得加上 `preventDefaultOnInputTypes: false` 等参数处理冲突。

---

## 总结

你现在拥有了一个：

完整的 Markdown 风格自动格式
自定义工具栏和图标分组
图片上传支持
快捷键风格完全 WordPress 化的 TinyMCE 编辑器！

从此以后，你再也不会因为按了 `Alt + Shift + 3` 却没反应而手忙脚乱啦