使用contenteditable属性可快速实现轻量级富文本编辑器，通过添加contenteditable="true"使元素可编辑，结合document.execCommand（已废弃但广泛支持）执行加粗、斜体、插入图片等格式化操作，并利用Selection与Range API精确控制选区内容，如高亮文本；监听input事件实时捕获内容变化，保存时存储innerHTML或innerText并注意XSS防护，适合自定义需求场景。
使用 contenteditable 属性结合 HTML5 提供的文本操作 API，可以快速实现一个轻量级富文本编辑器。这种方法无需引入大型框架或第三方库，适合自定义需求较强的场景。
启用 contenteditable 实现可编辑区域
在任意 HTML 元素上添加 contenteditable="true"，即可让该元素内容变为可编辑状态。
在这里输入内容...
浏览器会允许用户直接在这个 div 中输入、删除、格式化文本。默认支持基础的加粗、斜体、换行等行为，但要实现更复杂的格式控制，需要借助 JavaScript 和文档对象模型（DOM）操作。
使用 document.execCommand（已废弃但仍广泛支持）
虽然 document.execCommand 已被标记为过时，但在大多数现代浏览器中依然可用，是实现富文本格式控制的常用方式。
立即学习“前端免费学习笔记（深入）”；
通过 execCommand 可执行如加粗、斜体、插入链接等命令：
- document.execCommand('bold')：切换选中文本的加粗样式
- document.execCommand('italic')：切换斜体
- document.execCommand('insertImage', false, imageUrl)：插入图片
- document.execCommand('createLink', false, url)：创建超链接
-
document.execCommand('formatBlock', false, '
')
：将段落转为标题
示例按钮绑定加粗功能：
Selection 与 Range API 精确控制文本
对于更精细的操作，HTML5 提供了 Selection 和 Range 接口，可用于获取用户选中的文本范围并进行修改。
常见用法包括：
- window.getSelection()：获取当前选中的 Selection 对象
- selection.getRangeAt(0)：获取选区对应的 Range
- range.deleteContents()：删除选中内容
- range.insertNode(node)：在选区插入节点
- range.surroundContents(element)：用某个元素包裹选中内容（注意边界限制）
例如，手动给选中文本添加红色背景：
function highlightText() {
const selection = window.getSelection();
if (selection.rangeCount === 0) return;
const range = selection.getRangeAt(0);
const span = document.createElement('span');
span.style.backgroundColor = 'yellow';
span.appendChild(range.extractContents());
range.insertNode(span);
}
监听输入与保存内容
可通过监听 input 事件实时捕获编辑区域的变化：
document.getElementById('editor').addEventListener('input', function() {
console.log('当前内容：', this.innerHTML);
});
保存数据时建议存储 innerHTML 或 innerText，根据是否需要保留格式决定。注意防范 XSS 风险，对输出内容做适当过滤或转义。
基本上就这些核心要点。利用 contenteditable 搭配 execCommand 和 Selection/Range API，能构建出满足多数场景的富文本编辑器雏形，虽不复杂但容易忽略细节处理，比如光标位置维护和跨浏览器兼容性问题。后续可逐步扩展撤销、语法高亮、拖拽上传等功能。
