答案是利用contenteditable和execCommand实现轻量级富文本编辑器：1. 创建带格式按钮的工具栏和可编辑区域；2. 通过JavaScript监听按钮点击并执行对应命令；3. 添加基础样式提升外观；4. 建议增强内容实时保存、撤销重做、粘贴清理及安全性处理，注意焦点管理与空内容问题。
要实现一个简单的富文本编辑器，可以利用浏览器原生的 contenteditable 属性配合 JavaScript 来控制文本格式。这种方式无需引入大型库，适合轻量级场景。
1. 基础HTML结构
创建一个可编辑区域和一组格式化按钮：
<div id="editor-toolbar">
<button data-command="bold">加粗</button>
<button data-command="italic">斜体</button>
<button data-command="underline">下划线</button>
<button data-command="createlink" data-prompt="输入链接地址:">插入链接</button>
<button data-command="insertimage" data-prompt="输入图片URL:">插入图片</button>
</div>
<div id="editor" contenteditable="true"><br></div>
2. 核心JavaScript逻辑
通过 document.execCommand()（已弃用但仍广泛支持）执行格式化命令：
document.querySelectorAll('#editor-toolbar button').forEach(button => {
button.addEventListener('click', function() {
const command = this.dataset.command;
let arg = null;
if (this.dataset.prompt) {
arg = prompt(this.dataset.prompt);
}
if (command && arg !== null) {
document.execCommand(command, false, arg);
} else if (command) {
document.execCommand(command);
}
document.getElementById('editor').focus();
});
});
3. 添加基础样式
让编辑器看起来更像一个文本框：
立即学习“Java免费学习笔记（深入）”；
#editor {
border: 1px solid #ccc;
padding: 10px;
min-height: 200px;
font-family: Arial, sans-serif;
line-height: 1.5;
}
#editor-toolbar {
margin-bottom: 5px;
}
button {
padding: 5px 10px;
margin-right: 5px;
}
4. 注意事项与增强建议
虽然 execCommand 简单易用，但已被标记为过时。在生产环境中可考虑以下改进：
- 监听输入事件并实时保存内容：使用 input 或 keyup 事件
- 添加撤销/重做按钮：调用 undo 和 redo 命令
- 限制粘贴内容格式：监听 paste 事件并清理 HTML
- 兼容性处理：现代应用建议使用 Selection 和 Range API 替代
- 安全性：若内容将被展示给他人，需在后端过滤危险标签
