设置contenteditable="true"不等于可编辑，根本原因是浏览器拒绝交予焦点：需补tabindex="0"、排除pointer-events:none等css拦截、避免祖先设contenteditable="false"（就近false优先）。
加 contenteditable="true" 不等于能编辑——多数“没反应”问题出在聚焦、样式拦截或继承链上。
为什么设置了 contenteditable="true" 却点不动？
根本原因不是属性没写对，而是浏览器拒绝把焦点交给它。常见堵点有三个：
-
tabindex缺失：像<div>、<code><p></p>这类非表单元素默认不可聚焦，必须显式加tabindex="0"（或负值）才能接收焦点 - CSS 拦截：
pointer-events: none或user-select: none会直接禁用鼠标交互，哪怕属性开着也白搭 - 父级封锁：只要祖先元素写了
contenteditable="false"，子元素设成true也无效——继承规则是“就近false优先” -
contenteditable="true"：允许富文本编辑（支持换行、粗体、粘贴 HTML 等） -
contenteditable="false"：彻底禁用，且阻断子元素继承编辑能力 -
contenteditable="plaintext-only"：粘贴时自动 strip 格式，回车只换行不生成<p></p>，适合纯文本场景 - 用户按回车，Chrome 可能塞
<div>，Firefox 塞 <code><p></p>，Safari 塞<br> - 空行可能变成
<p><br></p>或<div><br></div> - 粘贴 Word 内容会带一堆
style和data-属性，不属于用户真实输入 - 用
setAttribute('contenteditable', 'true')，别用.contentEditable = true（后者设的是字符串"true"，但部分老环境对大小写敏感） - 新元素也要补
tabindex="0"，否则首次点击不聚焦 - 如果父容器用了
contenteditable="plaintext-only"，子元素即使设true也会被降级——这个限制没法绕过
contenteditable 的三个合法值怎么选？
别用布尔简写（比如只写 contenteditable），不同浏览器对无值写法解释不一致。明确指定以下三者之一：
注意：inherit 值极少手动使用，它只是默认行为——没设值时就等价于 inherit。
编辑后怎么安全读取内容？
别直接用 innerHTML 当最终数据源，它混入太多浏览器私货：
推荐组合策略：
– 实时监听用 input 事件（比 blur 更及时）
– 读取用 textContent 得纯文本，或用正则清理 innerHTML：el.innerHTML.replace(/<br>/gi, '\n').replace(/]*>/gi, '')（按需保留基础标签）
动态添加的可编辑元素要注意什么？
JavaScript 创建的新节点（比如 document.createElement('li')）不会自动继承父容器的 contenteditable 状态，必须手动设置：
最易被忽略的是：编辑区域一旦进入 shadow DOM，contenteditable 就完全失效，连 execCommand 都调不了——这不是 bug，是规范限定。
