直接写contenteditable="true"后光标乱跳、回车异常是浏览器默认行为未约束所致；应禁用自动换行、拦截enter键、避免空容器、用range/selection api维护光标位置。
contenteditable="true"加了但光标乱跳、回车异常怎么办
直接写 contenteditable="true" 后出现光标卡住、按回车插入 <div> 或 <code><p></p>、删除空行后焦点丢失——这不是你代码写错了，是浏览器默认行为没被约束。
实操建议：
- 显式设置
white-space: pre-wrap和word-break: break-word，否则长文本换行错位、空格折叠 - 禁用默认聚焦轮廓：
outline: none，再用box-shadow模拟选中态，避免 Chrome/Firefox 表现不一致 - 拦截
Enter键：keydown中调用e.preventDefault()，再根据需求插入\n或手动创建<br>，别依赖浏览器自动换行 - 避免在空容器中触发编辑——父元素为空时，Safari 会吞掉焦点；可初始化时填一个占位字符（如
input事件总漏触发，怎么可靠监听内容变化
input 事件只对键盘输入敏感，粘贴、撤销（Ctrl+Z）、中文输入法上屏、拖拽插入、甚至部分 IME 提交都收不到。靠它存数据，必丢内容。
实操建议：
- 组合监听：
input+compositionend（捕获中文输入完成） +blur（兜底防失焦未保存） - 关键场景必须用
MutationObserver：监听characterData和childList变更，尤其当允许插图、链接等富文本节点时 - 别在
input回调里直接读el.innerHTML——用户粘贴带<script></script>的 HTML 会执行脚本；优先用el.textContent或白名单清洗后的 HTML
粘贴 Word 或网页内容后样式崩塌、XSS 风险怎么防
用户 Ctrl+V 粘贴，常带 <font></font>、style、嵌套、甚至内联 width/height，轻则布局错乱，重则执行恶意脚本。
实操建议：
- 拦截
paste事件，e.preventDefault()后取e.clipboardData.getData('text/plain')走纯文本路径最稳 - 若需保留粗体/列表等简单格式，用
DOMParser解析'text/html'，递归遍历只留<p></p>、<strong></strong>、<ul></ul>/<ol></ol>，剔除所有style属性和未知标签 - 禁用
document.execCommand('insertHTML')——它不校验，直接注入；改用document.execCommand('insertText', false, text)（虽已废弃，但目前兼容性最好） - 移动端必须监听
compositionstart/compositionend，否则拼音输入上屏时内容丢失
React/Vue 里动态渲染后光标消失，怎么恢复选区
框架重新 render 后 DOM 节点被替换，原生 Selection 信息丢失，光标“凭空消失”——这不是框架 bug，是 contenteditable 和虚拟 DOM 的天然冲突。
实操建议：
- 在 re-render 前用
window.getSelection()+getRangeAt(0)记录选区位置（起始偏移、容器节点） - render 完成后，用
Range+SelectionAPI 手动重建选区：range.setStart(node, offset)，再selection.addRange(range) - 避免把
contenteditable放在v-for或map渲染的子项里；优先包裹在稳定 key 的父容器中 - Shadow DOM 内使用时，必须显式设置
contenteditable，根节点不会自动透传
真正难的不是让元素可编辑，而是让每次光标落点可控、每次粘贴干净、每次框架更新后还能找回上次的位置。这些细节不处理，用户一上手就会觉得“卡”“乱”“存不住”。
