构建富文本编辑器是前端开发中比较常见的需求，execCommand作为早期浏览器提供的原生API，曾经是很多开发者实现编辑器功能的第一选择，它的使用逻辑简单，不需要太多额外的代码就能实现加粗、斜体、插入链接等基础操作。
execCommand的基本使用与优势
execCommand是document对象上的方法，调用时可以传入命令名称和相关参数，直接对当前可编辑区域的内容进行修改。它的优势主要体现在开发成本低，不需要自己处理复杂的DOM操作逻辑。
下面是一个最基础的execCommand使用示例，实现一个简单的加粗功能：
// 获取可编辑区域元素
const editableDiv = document.getElementById('editable');
// 开启可编辑模式
editableDiv.contentEditable = 'true';
// 点击加粗按钮时执行命令
function handleBoldClick() {
// 执行加粗命令，第二个参数为是否显示默认UI，第三个参数为额外参数
document.execCommand('bold', false, null);
}
execCommand支持的常见命令包括<bold>、<italic>、<underline>、<insertHTML>等，基本能覆盖简单的文本格式化需求，对于只需要基础编辑功能的小型项目来说，确实能快速完成开发。
execCommand的局限性
随着富文本编辑器功能需求越来越复杂，execCommand的缺点也逐渐暴露出来，主要问题集中在以下几个方面：
- 浏览器兼容性不一致，不同浏览器对同一个命令的实现逻辑有差异，比如某些命令在Chrome和Firefox下的表现完全不同，需要写大量兼容代码。
- 无法精确控制DOM结构，execCommand生成的HTML结构不可控，比如加粗可能生成<strong>标签也可能生成<b>标签，不利于后续的内容解析和存储。
- 已经被Web标准废弃，现代浏览器虽然还保留支持，但未来可能会逐步移除，使用它存在长期维护风险。
- 无法处理复杂的自定义操作，比如插入自定义组件、实现协同编辑等功能时，execCommand完全无法满足需求。
主流替代方案介绍
方案一：基于自定义选区和DOM操作
这种方案的核心是手动管理用户在编辑器中的选区，监听用户的操作事件，自己控制DOM的修改逻辑，能完全掌控编辑器的输出结构。
实现思路大致分为三步：
- 通过
window.getSelection()获取当前用户选中的内容范围。 - 监听编辑区域的
input、等事件，捕获用户的操作意图。 - 根据操作意图手动修改选区对应的DOM节点，生成符合预期的HTML结构。
下面是一个简单的自定义加粗实现示例：
// 获取当前选中的范围
function getSelectionRange() {
const selection = window.getSelection();
if (selection.rangeCount === 0) return null;
return selection.getRangeAt(0);
}
// 自定义加粗操作
function customBold() {
const range = getSelectionRange();
if (!range) return;
// 创建strong标签
const strongEl = document.createElement('strong');
// 将选中的内容放入strong标签
strongEl.appendChild(range.extractContents());
// 插入strong标签到原位置
range.insertNode(strongEl);
// 重新设置选区，让光标在加粗内容之后
const newRange = document.createRange();
newRange.setStartAfter(strongEl);
newRange.setEndAfter(strongEl);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(newRange);
}
方案二：使用document.designMode
document.designMode可以开启整个文档的可编辑模式，和contentEditable类似，但它是作用于整个文档的。配合监听输入事件，可以自己处理所有的内容变更逻辑，避免execCommand的不可控问题。
示例代码如下：
// 开启整个文档的可编辑模式
document.designMode = 'on';
// 监听输入事件，自定义处理逻辑
document.addEventListener('input', (e) => {
// 可以在这里拦截输入内容，做自定义处理
console.log('当前输入内容：', e.target.innerHTML);
});
方案三：基于现有成熟编辑器库
如果项目对富文本编辑器功能要求较高，也可以直接选择成熟的第三方库，比如Quill、ProseMirror、Slate等，这些库已经封装了选区和DOM操作的复杂逻辑，提供了统一的API，不需要自己处理底层实现。
以Quill为例，初始化一个基础编辑器的代码：
// 引入Quill库后初始化
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: ['bold', 'italic', 'underline']
}
});
不同场景的方案选择建议
开发者可以根据项目的实际需求选择合适的方案：
| 场景 | 推荐方案 |
|---|---|
| 只需要极简的基础编辑功能，不需要长期维护 | execCommand（短期使用） |
| 需要自定义输出结构，功能中等复杂度 | 自定义选区+DOM操作 |
| 需要高度定制化，有复杂交互需求 | ProseMirror、Slate等库 |
| 快速上线，需要丰富的内置功能 | Quill等开箱即用的库 |
总的来说，execCommand只适合非常简单的临时场景，长期来看更推荐使用可控的自定义实现或者成熟的第三方库，避免后续维护中出现兼容性和功能扩展的问题。
execCommand富文本编辑器document_designModeInput_Event自定义选区修改时间：2026-07-11 11:06:40