contenteditable="true"需显式设置white-space和word-break、禁用outline并避免嵌套；监听变化须组合input/compositionend/blur及mutationobserver；粘贴需过滤html；光标管理须手动保存恢复。
contenteditable="true" 的基础用法与常见误操作
直接给任意元素加 contenteditable="true" 就能编辑，但多数人一开始会忽略父容器的样式继承和事件干扰。比如 <div contenteditable="true"></div> 在 Chrome 里默认有内边距、换行行为不一致，Firefox 下光标可能卡在文字末尾无法回删。
实操建议：
- 始终显式设置
white-space: pre-wrap和word-break: break-word，避免长文本溢出或折叠空格 - 移除浏览器默认聚焦轮廓：添加
outline: none，再用box-shadow或边框模拟选中态 - 不要把
contenteditable加在<input>或<textarea></textarea>上——无效，且部分浏览器会静默忽略 - 避免嵌套多个
contenteditable元素，否则光标跳转、剪贴板粘贴行为不可控
监听内容变化不能只靠 input 事件
input 事件对键盘输入响应及时，但对右键粘贴、拖拽插入、撤销重做（Ctrl+Z/Y）、甚至部分 IME 输入（如中文拼音上屏）常常漏触发。真实场景中，内容变更可能来自 DOM 变化而非用户按键。
实操建议：
- 组合监听：
input+compositionend（处理中文输入完成）+blur（防失焦未保存） - 对关键节点使用
MutationObserver监听子节点变动，尤其当允许富文本（如插入图片、链接）时 - 避免在
input回调里直接调用innerHTML获取内容——若用户粘贴了带 script 标签的 HTML，会执行脚本；应先用textContent或白名单过滤
粘贴富文本时的格式失控与净化策略
用户 Ctrl+V 粘贴 Word 或网页内容，常带冗余 style、font、span 嵌套、甚至 class 和内联 width/height，导致样式错乱或布局崩塌。
实操建议：
- 拦截
paste事件，调用event.preventDefault()，再从event.clipboardData.getData('text/html')或'text/plain'提取内容 - 优先走纯文本路径：用
event.clipboardData.getData('text/plain')+document.execCommand('insertText', false, text)（注意：已废弃但目前仍最稳） - 若需保留简单格式（如粗体、列表），用 DOMParser 解析 HTML 后递归遍历，只保留
p、strong、ul/ol/li，剔除所有style属性和未知标签 - 别依赖后端清洗——前端显示已错乱，用户体验已受损
focus/selection 管理在复杂交互中极易失效
动态渲染内容（如 Vue/React 更新 DOM）、插入节点、或调用 document.execCommand 后，浏览器常丢失光标位置，甚至将光标重置到容器开头。这不是 bug，是 contenteditable 对 DOM 变更敏感的固有特性。
实操建议：
- 保存光标前先用
window.getSelection()和getRangeAt(0)记录startContainer、startOffset；恢复时用range.setStart()+sel.removeAllRanges()+sel.addRange() - 在框架中（如 React），避免直接操作
innerHTML；改用ref拿到原生元素后，在useEffect或componentDidUpdate中手动恢复 selection - 移动端 iOS Safari 对
setSelectionRange支持极差，涉及输入法场景时，优先用focus()+scrollIntoView()保底，别强求光标精确定位
contenteditable 表面简单，但一旦涉及格式控制、跨平台兼容、状态同步，每个环节都藏着隐性约束。最常被忽略的是：它不提供值绑定模型，也不保证内容结构合法——你拿到的永远是“用户最后留在 DOM 里的东西”，而不是“用户想表达的语义”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
