最直接原因是元素不可聚焦，需加tabindex="0"；其他包括父级contenteditable="false"、css禁用user-select/pointer-events、shadow dom未显式设置、内联元素定位异常。
contenteditable="true"加了却不能编辑，常见原因有哪些
最直接的原因是元素不可聚焦：div、p这类非表单元素默认不在 Tab 链里，键盘操作（比如 Ctrl+B）根本触发不了。必须显式加 tabindex="0" 才能被 focus 或键盘切入。
其他失效场景包括：
- 父级设置了
contenteditable="false"—— 浏览器按“就近 false 优先”规则继承，子元素再设true也无效 - CSS 中存在
user-select: none、pointer-events: none或display: contents - 元素在 Shadow DOM 内，但没在 Shadow 根节点上显式设置该属性
- 用在
span、strong等内联元素上——光标定位异常，建议只用于div、section这类块级容器
监听内容变更该用 input 还是 blur
用 input 事件。它在每次按键、粘贴、格式操作后立即触发，比 blur 更及时，适合实时保存或校验。
blur 只在失焦时触发，用户可能编辑完直接关页，内容就丢了。但要注意：input 不会捕获 document.execCommand 触发的格式变化（如加粗），因为 execCommand 不触发该事件——现代方案应避免依赖 execCommand，改用 Selection + Range 插入节点，这样才真正可控。
示例写法：
const el = document.getElementById('editor');
el.addEventListener('input', () => {
console.log('纯文本:', el.textContent);
console.log('HTML(需清洗):', el.innerHTML);
});
粘贴富文本时 HTML 乱七八糟怎么处理
浏览器默认把 Word、微信、网页复制的内容原样塞进 DOM，带大量 style、嵌套、data- 属性甚至 <script></script> 标签残留。这不是 bug，是规范行为。
正确做法是拦截 paste，禁用默认行为，再手动解析并清洗：
- 调用
event.preventDefault() - 用
event.clipboardData.getData('text/html')拿原始 HTML 字符串（不是'text/plain'，否则丢格式） - 用
DOMParser解析成文档片段，遍历节点做白名单过滤（只留<p></p>、<strong></strong>、<em></em>、<ul></ul>、<ol></ol>） - 删掉所有
style属性和class，避免污染样式体系 - 别用正则匹配 HTML 字符串——易漏、易错、不安全
如果业务只要纯文本，直接取 event.clipboardData.getData('text/plain')，跳过 HTML 解析环节更轻量。
为什么不能直接用 innerHTML 存储和回显
因为 innerHTML 是浏览器渲染后的结果，不是用户输入的语义表达。它会混入：
- 浏览器自动插入的空
<div> 或 <code><p></p>（不同浏览器换行行为不一致） - 冗余的
<br>、孤立<span></span>、无意义的class和style - 潜在 XSS 风险节点（比如残留的
<script></script>或onerror属性）
导出时应递归遍历节点：把 <font color></font> 转成 <span style="color:"></span>，把 <b></b> 统一为 <strong></strong>，删掉空 <span></span> 和孤立 <br>。上线前务必用 DOMPurify.sanitize() 清理，或至少做基础标签白名单过滤。
真正麻烦的不是加个 contenteditable，而是后续所有行为都要自己接管：回车插什么标签、Shift+Enter 怎么换行、光标跨块时 Bold 怎么包裹、移动端键盘遮挡怎么处理——这些边界 case 一旦漏掉，用户就会遇到“点一下变两行”“加粗后整段消失”之类的问题。
