contenteditable="true"仅开启编辑能力，必须配合tabindex="0"聚焦、paste拦截和enter处理才安全可用，否则易致光标丢失、xss漏洞或格式混乱。
直接加 contenteditable="true" 不等于能用——它只是打开浏览器编辑引擎的开关，没配 tabindex、不拦截 paste、不处理 Enter，轻则光标消失、粘贴带 <script></script>，重则 XSS 漏洞上线。
为什么写了 contenteditable="true" 却点不动或 Tab 进不去
因为 div、p 等非表单元素默认不可键盘聚焦，contenteditable 不会自动加 tabindex。
- 必须显式加
tabindex="0"：让元素进入 Tab 链，支持Ctrl+B/Ctrl+I等快捷键 - 只写
tabindex="-1"：只能靠 JS 调用el.focus()主动聚焦，无法键盘切换 - 漏掉这步时，鼠标点击能打字，但
SelectionAPI 和document.execCommand全部失效——因为没焦点 - CSS 中若存在
pointer-events: none或user-select: none，也会彻底屏蔽点击
粘贴富文本时为什么带样式甚至 script 标签
这不是 bug，是浏览器原生行为：复制自 Word、微信、网页的内容，默认以完整 HTML 片段插入，包括内联样式、<meta>、不可见字符，甚至 <img onerror="alert(1)">。
- 拦截
paste事件，用event.clipboardData.getData('text/plain')提纯文本最稳妥 - 避免直接用
execCommand('insertText')：该 API 已废弃，Chrome 98+ 移除部分命令 - 别依赖
plaintext-only：不是标准值，Firefox 忽略，Safari 行为未统一，别当生产方案 - 若需保留换行，可用
el.textContent.replace(/\n/g, '<br>')
，但仅限可信内容
监听内容变化不能只靠 input 事件
input 事件对键盘输入响应及时，但对右键粘贴、拖拽插入、撤销重做（Ctrl+Z/Y）、甚至部分 IME 输入（如中文拼音上屏）常常漏触发。
- 组合监听：
input+compositionend（处理中文输入完成） +blur（防失焦未保存） - 对关键节点使用
MutationObserver监听子节点变动，尤其当允许富文本（如插入图片、链接）时 - 避免在
input回调里直接调用innerHTML获取内容——若用户粘贴了带script标签的 HTML，会执行脚本；应先用textContent或白名单过滤
表格单元格里直接用 contenteditable="true" 为什么总出问题
contenteditable 是“天生可编辑”，不是“点击才编辑”。直接加在 <td> 上会让单元格始终处于可编辑态，用户一进页面就能乱输，不符合交互预期。
<ul>
<li>初始状态应移除 <code>contenteditable 属性，只保留纯文本
contenteditable="true" 并调用 .focus()
data-prev-value 属性里，用于取消时还原blur 时比较新旧值，有变化再触发保存逻辑，没变化就清空 contenteditable
ESC 键取消：监听 keydown，判断 e.key === 'Escape'，然后还原内容 + 移除属性 + blur
真正难的不是加属性，而是控制边界：光标位置、粘贴来源、回车语义、祖先继承链、移动端软键盘唤起时机——这些地方不手动兜底，contenteditable 就只是个半成品开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
