在网页中实现富文本编辑功能，不一定非要引入庞大的第三方库。利用浏览器原生的document.execCommand方法，配合contenteditable属性，我们可以快速搭出一个能用的简易编辑器，满足加粗、斜体、插入链接等基础需求。
基本原理
核心思路只有两步：第一，让一个普通容器变成用户可编辑区域；第二，选中文字后调用execCommand执行对应命令。下面先看最小结构。
<div id="editor" contenteditable="true">在这里输入内容</div> <button id="boldBtn">加粗</button> <button id="italicBtn">斜体</button>
绑定命令
在脚本里，我们只需要监听按钮点击，调用execCommand并传入命令名称即可。注意execCommand的返回值表示命令是否执行成功。
// 获取编辑区和按钮
var editor = document.getElementById('editor');
var boldBtn = document.getElementById('boldBtn');
var italicBtn = document.getElementById('italicBtn');
// 加粗
boldBtn.addEventListener('click', function () {
// 第二个参数表示是否显示默认UI，一般用false
document.execCommand('bold', false, null);
});
// 斜体
italicBtn.addEventListener('click', function () {
document.execCommand('italic', false, null);
});
常用命令对照
| 命令 | 作用 | 示例值 |
|---|---|---|
| bold | 切换选中文字加粗 | null |
| italic | 切换选中文字斜体 | null |
| underline | 切换下划线 | null |
| createLink | 为选中文字创建链接 | https://ipipp.com |
| insertHTML | 在光标处插入HTML | <span>文本</span> |
插入链接示例
插入链接时，第三个参数传入网址字符串。若用户未选中文字，命令可能无效，实际项目中应先判断selection。
var linkBtn = document.getElementById('linkBtn');
linkBtn.addEventListener('click', function () {
var url = window.prompt('请输入链接地址', 'https://ipipp.com');
if (url) {
document.execCommand('createLink', false, url);
}
});
这种方案的局限
- execCommand已被部分现代标准标记为弃用，未来可能移除
- 不同浏览器生成的HTML标签不一致，例如加粗可能用<b>或<strong>
- 撤销重做栈不稳定，复杂交互下容易丢失
- 无法直接控制粘贴内容的过滤
何时适合使用
如果你的场景是内部工具、快速原型、或者对兼容性要求覆盖老浏览器，用execCommand仍然是务实选择。它开发快、理解成本低。但当项目需要稳定输出、复杂排版时，建议考虑基于Selection和Range自行实现，或采用成熟开源编辑器。
小结：execCommand配合contenteditable能让你在几十行代码内拥有基础编辑能力，但请清楚它的边界，避免在生产核心场景过度依赖。
execCommand富文本编辑器contenteditable修改时间：2026-07-27 02:03:16