如何利用 JavaScript 实现一个支持快捷键操作的富文本编辑器？

紅蓮之龍

发布： 2025-09-27 08:08:02

原创

410人浏览过

答案：通过contenteditable结合keydown事件监听实现快捷键操作，使用document.execCommand执行加粗、斜体、下划线、插入链接等命令，支持Ctrl/Cmd组合键触发，可扩展对齐、列表、标题等功能，并建议后续迁移至现代API或使用专业库优化兼容性与功能。

如何利用 javascript 实现一个支持快捷键操作的富文本编辑器？

要实现一个支持快捷键操作的富文本编辑器，核心是结合 contenteditable 元素与 JavaScript 的键盘事件监听。通过拦截用户按键并调用 document.execCommand（或现代的 Selection/Range API）来实现加粗、斜体、插入链接等常用功能。

1. 创建基础编辑区域

使用一个可编辑的 div 作为编辑器主体：

```html
<div id="editor" contenteditable="true"></div>
```

设置一些基本样式，确保光标和内容显示正常：

立即学习“Java免费学习笔记（深入）”；

```css
#editor {
border: 1px solid #ccc;
min-height: 200px;
padding: 10px;
font-family: Arial, sans-serif;
outline: none;
}
```

2. 监听键盘快捷键

绑定 keydown 事件，检测 Ctrl 或 Cmd 键配合其他字母键的组合：

GPT-MINUS1

通过在文本中随机地用同义词替换单词来愚弄GPT

查看详情

```javascript
const editor = document.getElementById('editor');

editor.addEventListener('keydown', (e) => {
// 检测 Ctrl/Cmd + B 实现加粗
if (e.key === 'b' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
document.execCommand('bold', false, null);
}

// Ctrl/Cmd + I 实现斜体
if (e.key === 'i' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
document.execCommand('italic', false, null);
}

// Ctrl/Cmd + U 添加下划线
if (e.key === 'u' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
document.execCommand('underline', false, null);
}

// Ctrl/Cmd + K 插入链接（提示输入 URL）
if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
const url = prompt('请输入链接地址：', 'https://');
if (url) {
document.execCommand('createLink', false, url);
}
}
});
```

3. 扩展更多实用功能

可以添加对齐、列表、标题等命令。例如：

```javascript
// 居中对齐：Ctrl + Shift + C
if (e.key === 'c' && e.ctrlKey && e.shiftKey) {
e.preventDefault();
document.execCommand('justifyCenter', false, null);
}

// 插入有序列表：Ctrl + Shift + O
if (e.key === 'o' && e.ctrlKey && e.shiftKey) {
e.preventDefault();
document.execCommand('insertOrderedList', false, null);
}

// 切换为 H1 标题：Ctrl + 1
if (e.key === '1' && e.ctrlKey) {
e.preventDefault();
document.execCommand('formatBlock', false, '