太棒了!你已经有一个非常完整、成熟的 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-->` 标签 | `插入“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 <!--more-->', () => editor.insertContent('<!--more-->'));
// 分页标签(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` 却没反应而手忙脚乱啦 ????
---
需要我帮你生成一份完整的 `.js` 文件?或者想让我帮你打包成一个插件形式供多个页面复用?随时告诉我!
暂无回复,快来抢沙发吧