contenteditable="true"不能直接当编辑器引擎，因它仅提供光标和输入入口，不处理回车、粘贴、格式等语义逻辑，需手动解决聚焦（tabindex="0"）、css拦截、继承中断三大卡点，并规范回车、粘贴、内容读取与安全过滤。
不能直接用 contenteditable="true" 当编辑器引擎——它只提供光标和输入入口，不处理回车、粘贴、格式、删除等任何语义逻辑，放任不管必然跨浏览器行为错乱、XSS 风险高、移动端失焦。
为什么加了 contenteditable 还是点不动、没光标、按 Ctrl+B 没反应
核心卡点不是属性写错了，而是浏览器根本没把焦点交给你。三个高频断点必须逐个打通：
-
tabindex="0"缺失：<div contenteditable="true"> 默认不可被 Tab 或 <code>.focus()激活，必须显式加tabindex="0" - CSS 拦截：
user-select: none、pointer-events: none或未设:focus样式，会导致点击无响应或无视觉反馈 - 继承链中断：父容器写了
contenteditable="false"，子元素即使写true也立即失效（“就近 false 优先”） - 监听
keydown，检测e.key === 'Enter'并e.preventDefault() - 用
document.getSelection()获取当前光标位置，创建document.createElement('p') - 调用
range.insertNode(p)插入段落，再用range.collapse(false)把光标移到新段落末尾 - 禁用浏览器自动换行：CSS 加
white-space: pre-wrap，并移除所有<div> 段落容器 <p>不这么做，后端收到的 HTML 就是混合 <code><p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<div>、<code><br>的脏数据，清洗成本远高于前端主动规范。粘贴 Word 或网页内容时，怎么防止样式爆炸和 XSS
直接
innerHTML接收粘贴内容 = 主动引入风险。用户一粘就带style、data-*、嵌套<span></span>，甚至隐藏脚本标签。- 必须
preventDefault()拦截paste事件 - 优先取纯文本：
e.clipboardData.getData('text/plain')，再用document.execCommand('insertText', false, text)插入 - 若需保留基础语义（如段落、加粗），用
DOMPurify.sanitize(html, {ALLOWED_TAGS: ['b','i','u','p','br']})过滤后再插入 - 绝对不要信任
e.clipboardData.getData('text/html')—— 它连空格缩进都可能含恶意属性
注意：iOS Safari 的
paste在某些输入法下会漏触发，建议补监听beforeinput（仅限较新 Chrome/Firefox）作兜底。读取内容时，
innerHTML和textContent到底该用哪个这不是风格选择，而是业务语义决定的技术路径：
- 存为富文本（含加粗/列表/链接）→ 必须用
innerHTML，但必须服务端二次过滤（DOMPurify 或白名单解析） - 提取摘要、搜索索引、字数统计 → 无条件用
textContent，它无视所有标签，只返回用户实际看到的字符 - 保存前最小清洗：移除所有
style、class（除非你主动管理）、data-属性；只保留<b></b>、<i></i>、<p></p>、<ul></ul>等语义标签
最容易被忽略的是：移动端软键盘收起前，
input事件可能漏发一次，导致最后一次编辑没被捕获——别只依赖它，要结合MutationObserver监听 DOM 变化做兜底。 - 必须
实操建议：初始结构至少带 tabindex="0" 和基础 focus 边框，例如：<div contenteditable="true" tabindex="0" style="outline: 2px solid #007bff;">
<h3>如何统一回车行为，避免 Chrome 插 <code><div>、Safari 插 <code><p></p>
浏览器对 Enter 的默认映射完全不一致，且无法通过 CSS 或属性修正，只能拦截 + 手动插入。
