contenteditable不是开箱即用的开关，而是需配合tabindex聚焦、拦截paste/keydown、监听compositionend、用mutationobserver清洗dom的可控编辑入口。
contenteditable 不是开关一按就完事的属性，它只打开编辑能力，但输入行为、光标位置、粘贴内容、中文上屏、回车换行全由浏览器“自由发挥”——不干预就会在 Chrome 插 <div>，在 Firefox 插 <code><p></p>，在 Safari 粘贴后光标消失，中文输入漏字。
为什么 input 事件监听不到全部变更
input 事件对键盘按键响应及时，但它不覆盖所有内容变更路径。右键粘贴、拖拽插入、Ctrl+Z/Y 撤销重做、甚至中文拼音上屏完成（compositionend）都可能绕过它。
- 必须组合监听：
input+compositionend（捕获中文输入完成） +blur（兜底防失焦未保存） - 富文本场景下，若允许插入图片或链接，仅靠事件不够，需用
MutationObserver监听子节点变动 - 别在
input回调里直接读innerHTML——用户粘贴含<script></script>的 HTML 会执行脚本；优先用textContent或白名单过滤后再解析
粘贴时怎么避免 Word 样式和 XSS
用户 Ctrl+V 粘贴 Word 或网页内容，常带冗余 style、嵌套 span、font 标签，甚至 onerror 属性。后端清洗救不了前端显示错乱。
- 必须拦截
paste事件：e.preventDefault()，再取e.clipboardData.getData('text/plain')强制走纯文本路径（最稳） - 若需保留基础格式（如粗体、列表），用
DOMParser解析'text/html'，递归遍历只保留p、strong、ul/ol/li，剔除所有style、class和未知标签 - 绝对别用正则替换
innerHTML字符串清洗——innerHTML.replace(/<script.>/gi, '')</script.>容易漏掉变体或闭合错误，XSS 风险极高
回车和中文输入怎么不出错
浏览器默认回车行为不一致：Enter 在 Chrome 插 <div>，Firefox 插 <code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，Shift+Enter 行为也不统一；中文输入法上屏瞬间，input 还没触发，内容就“丢了一拍”。
- 监听
keydown，对e.key === 'Enter'调用e.preventDefault()，再手动插入<p></p>或<br>（按需） - 必须监听
compositionstart和compositionend：前者标记输入法开始，后者才是上屏完成；仅靠input会漏掉拼音选词阶段的中间态 -
document.execCommand已废弃，且在 Firefox 中formatBlock失效、insertHTML输出不可控，真要加粗/列表，得用getSelection()+Range手动包裹节点
光标定位为什么总失效
调用 el.focus() 后，光标常卡在开头、停在空 <p></p> 里，或干脆消失。浏览器不会自动判断“该落在哪”，尤其元素初始为空、含嵌套标签、或 SSR 渲染未就绪时。
- 必须手动用
Range+Selection控制：先range.selectNodeContents(el)，再range.collapse(false)移到末尾，最后selection.addRange(range) - 若元素内有不可见节点（如空
<p></p>），selectNodeContents可能选中无效位置；稳妥做法是先清空结构，用纯文本初始化，再插入空白文本节点并定位 - SSR 页面首次
focus()常失败，需包裹在requestAnimationFrame或setTimeout(..., 0)中；移动端 Safari 更不稳定，建议额外加role="textbox"提升可访问性兼容
真正难的不是让文字变可编辑，而是把光标位置、选区边界、格式嵌套、跨浏览器差异、XSS 过滤、移动端键盘适配这些细节全兜住——哪怕只做一个内嵌备注框，也得先处理好粘贴和回车；要做正式产品，建议直接上 Tiptap 或 Quill。
