contenteditable 是最轻量的富文本编辑方案，原生支持焦点、光标与剪贴板交互；可用 execcommand（兼容但废弃）或 selection+range（现代可控）实现格式操作，需注意 tabindex、回车处理、大小写敏感及移动端焦点丢失等问题。
用 contenteditable 搭配原生 DOM 操作最轻量
不需要引入任何编辑器库，contenteditable="true" 就是浏览器原生支持的编辑入口。它不是“模拟输入”，而是让元素真正参与焦点、光标、剪贴板交互——所以你能直接用 document.execCommand（旧但有效）或 document.getSelection() + Range API（新且可控）做加粗、列表、对齐等操作。
常见错误是把 contenteditable 加在 <div> 上却忘了设 <code>tabindex="0"，导致键盘无法聚焦；或者没阻止默认回车行为，结果插入了多余的 <div> 而不是 <code><br>。
- 只对需要编辑的容器设
contenteditable="true"，别污染父级布局元素 -
工具栏按钮点击时，先调用
document.execCommand('focus')确保编辑区有焦点 - IE/Edge 旧版依赖
document.execCommand，Chrome/Firefox 新版建议用Selection+Range替代（比如插入链接需手动包裹文本节点）
execCommand 还能用吗？兼容性与替代路径
能用，但已被标记为废弃（deprecated），MDN 明确说“不应在新项目中使用”。不过目前所有主流浏览器（包括 Chrome 120+）仍完整支持，尤其对「加粗」「斜体」「有序列表」这类基础格式，execCommand 一行代码就能搞定，比手写 Range 逻辑快得多。
容易踩的坑是参数大小写敏感：document.execCommand('bold', false, null) 中 'bold' 必须小写，传 'Bold' 直接静默失败；还有部分命令（如 'insertUnorderedList'）在空行触发时可能创建空 <ul></ul>，需要提前检查选区是否为空。
立即学习“前端免费学习笔记（深入）”；
- 基础格式（
'bold'/'italic'/'underline'）继续用execCommand，省事且稳定 - 结构操作（
'insertOrderedList'/'formatBlock'）注意目标节点类型，避免嵌套错乱 - 想长期维护，就从现在开始封装一个
applyFormat函数，内部按浏览器能力自动降级：优先试Selection.modify或Document.execCommand，都不行再 fallback 到手动 DOM 操作
工具栏按钮如何绑定到真实编辑行为
按钮本身只是触发器，关键在点击后「获取当前光标位置」「判断上下文」「执行格式变更」三步。比如点击「加粗」按钮，不能无脑套 <strong></strong> 标签，而要先看选区是否跨块级元素（如横跨两个 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2112" title="TicNote"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680038323231.png" alt="TicNote"></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2112" title="TicNote">TicNote</a>
<p>出门问问推出的Agent AI智能硬件</p>
</div>
<a href="/ai/2112" title="TicNote" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>），否则会破坏语义结构。
一个常被忽略的细节：移动端 Safari 对 contenteditable 的选区控制极弱，点击按钮后经常丢失焦点，必须在 touchend 后立刻调用 element.focus() 并延迟 50ms 再执行命令。
- 每个按钮对应一个格式名（如
'bold'），统一走handleFormatClick(formatName)函数处理 - 执行前用
getSelection().rangeCount > 0判定是否有有效选区，没有就用window.getSelection().collapseToEnd()把光标归位到末尾 - 对齐类操作（
'justifyCenter'）作用于整个段落，需向上遍历找到最近的<p></p>或<div>，再设 <code>style.textAlign为什么不用
textarea或input做简化编辑器因为它们不支持富文本渲染。你没法在
textarea里让某几个字变红、插入图片、拖拽调整列表顺序——这些都依赖可编辑 HTML 流的 DOM 控制权。contenteditable提供的就是这个底层能力，而代价只是多处理一点样式重置（比如清除浏览器默认的user-modify: read-write行为）和粘贴过滤（防止带样式的 Word 内容炸开结构）。真正复杂的地方不在初始化，而在粘贴、撤销、协作光标、语义化输出这些延伸场景。如果只要「用户能加粗/换行/列个表」，那 100 行 JS + 一组按钮就够；一旦要导出 Markdown、支持快捷键、或对接后端存 HTML 片段，就得立刻考虑 XSS 过滤、标签白名单、
innerHTML安全替换这些事。
