contenteditable不是富文本编辑器，仅是可编辑开关；必须显式写contenteditable="true"，不可简写；读取用textcontent或过滤后的innerhtml；粘贴需拦截转纯文本，回车须手动统一处理。
contenteditable 不是富文本编辑器，它只是让元素可编辑的开关。直接加 contenteditable="true" 后，用户能打字、回车、粘贴、用 Ctrl+B 加粗——但这些行为由浏览器控制，不可靠、不一致、不安全。
为什么不能只写 contenteditable 或 contenteditable=""
Firefox 和 Safari 会忽略这种写法，必须显式指定值：contenteditable="true" 或 contenteditable="false"。值为 "inherit" 时，子元素会继承父级状态；一旦父级设了 false，子元素即使写 true 也无效（“就近 false 优先”）。
如何安全读取编辑后的内容
可编辑元素没有 value 属性，不能用 el.value 取值：
- 要纯文本摘要或校验，用
el.textContent—— 它不带标签，但会丢掉换行和格式 - 要保留格式，必须用
el.innerHTML，但原始 HTML 可能含<script></script>、onerror、Word 导出的嵌套<span style="..."></span>等风险节点 - 上线前必须过滤：推荐
DOMPurify.sanitize(el.innerHTML)；若只允许基础标签，可用白名单正则（如只留<p><strong><em><br></em></strong></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）
粘贴和回车为什么总出问题
默认粘贴会带入大量冗余样式和结构；回车在 Chrome 生成 <div>，在 Firefox 生成 <code><p></p>，Shift+Enter 行为也不统一：
- 必须拦截
paste事件，调用event.preventDefault()，再用event.clipboardData.getData('text/plain')强制转纯文本（最稳） - 若需保留部分格式，用
event.clipboardData.getData('text/html')+DOMParser解析，再递归遍历节点做白名单清洗 - 监听
keydown拦截 Enter：对普通 Enter 插入<p><br></p>，对 Shift+Enter 插入<br>，避免浏览器默认行为
别依赖 document.execCommand
这个 API 已被废弃，现代浏览器中行为差异大：formatBlock 在 Firefox 失效，insertHTML 输出不可控，undo 根本不工作：
- 检测格式状态可用
document.queryCommandState('bold')（只读，尚可兼容） - 真正插入格式，要用
getSelection()+Range获取选区，手动创建strong或span节点并包裹 - 撤销/重做必须自己维护栈，不能指望浏览器原生支持
真正难的不是让文字变可编辑，而是把光标位置、选区边界、格式嵌套、跨浏览器差异、XSS 过滤、移动端键盘适配这些细节全兜住——哪怕只做一个内嵌备注框，也得先处理好粘贴和回车；要做正式产品，建议直接上 Tiptap 或 Quill。
