contenteditable="true"需配合tabindex、css重置、事件监听与内容清洗才可用；否则将出现无法聚焦、粘贴崩溃、回车乱插、中文丢字等问题。

contenteditable 是唯一能直接让任意 HTML 元素变成可编辑区域的全局属性，但它不是“加了就能用”，而是“加了才开始踩坑”。必须配合 tabindex、CSS 重置、事件组合监听和内容清洗，否则用户点不动、粘贴崩、回车乱插标签、中文输入丢字——全是默认行为惹的祸。

为什么加了 contenteditable="true" 还是点不动

最常见原因是元素无法获得焦点：

• div、p 等原生非表单元素默认不可聚焦，必须显式加 tabindex="0"
• 父级若设了 contenteditable="false"，子元素即使写 "true" 也无效（“就近 false 优先”）
• CSS 中写了 user-select: none、pointer-events: none 或 display: contents，会静默禁用交互
• 别给 input 或 textarea 加这个属性——浏览器忽略，且可能干扰原生行为

怎么安全读取和保存编辑后的内容

innerHTML 和 textContent 行为完全不同，选错就埋雷：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 要保留换行、粗体等简单格式？用 el.innerHTML，但必须过滤：DOMParser 解析后只留 p、strong、ul/ol/li，删掉所有 style、class、script 标签
• 只要纯文本（如摘要、校验、后端存 plain）？直接用 el.textContent，它不执行脚本、不渲染标签，最安全
• 绝对别用正则替换 innerHTML 字符串来防 XSS——<scri>pt></scri> 这类变体极易漏掉
• 保存前建议先调用 el.normalize() 合并相邻文本节点，避免 DOM 结构碎片化

粘贴、回车、中文输入这三件事必须手动接管

浏览器默认行为在真实场景中几乎全部失效：

• 粘贴 Word 或网页内容？监听 paste 事件，e.preventDefault() 后取 e.clipboardData.getData('text/plain')，再用 document.execCommand('insertText', false, text) 插入（虽已废弃但目前最稳）
• 回车插入 <div> 或 <code><p></p>？监听 keydown 对 Enter 调用 e.preventDefault()，再按需插入 \n 或 <br>
• 中文拼音上屏漏字？必须监听 compositionstart 和 compositionend，input 事件在上屏完成之后才触发，不能替代
• 仅靠 input 事件远远不够——它不响应撤销（Ctrl+Z）、拖拽插入、execCommand 格式操作

真正难的不是启用编辑，而是让光标位置稳定、让粘贴不带样式、让中文输入不丢字、让保存的内容既干净又可用。这些细节没有统一解法，得根据你实际要支持的格式粒度（纯文本 / 换行 / 粗体 / 列表）逐层加控。