contenteditable="true"不能直接当编辑器引擎，因它仅提供光标和输入入口，不处理回车、粘贴、格式等语义逻辑，需手动解决聚焦（tabindex="0"）、CSS拦截、继承中断三大卡点，并规范回车、粘贴、内容读取与安全过滤。
不能直接用 contenteditable="true" 当编辑器引擎——它只提供光标和输入入口，不处理回车、粘贴、格式、删除等任何语义逻辑，放任不管必然跨浏览器行为错乱、XSS 风险高、移动端失焦。
为什么加了 contenteditable 还是点不动、没光标、按 Ctrl+B 没反应
核心卡点不是属性写错了，而是浏览器根本没把焦点交给你。三个高频断点必须逐个打通：
-
tabindex="0"缺失：<div contenteditable="true">默认不可被 Tab 或.focus()激活，必须显式加tabindex="0" - CSS 拦截：
user-select: none、pointer-events: none或未设:focus样式，会导致点击无响应或无视觉反馈 - 继承链中断：父容器写了
contenteditable="false"，子元素即使写true也立即失效（“就近 false 优先”）
实操建议：初始结构至少带 tabindex="0" 和基础 focus 边框，例如：<div contenteditable="true" tabindex="0" style="outline: 2px solid #007bff;">
如何统一回车行为，避免 Chrome 插 <div>、Safari 插 <p>
浏览器对 Enter 的默认映射完全不一致，且无法通过 CSS 或属性修正，只能拦截 + 手动插入。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 监听
keydown，检测e.key === 'Enter'并e.preventDefault() - 用
document.getSelection()获取当前光标位置，创建document.createElement('p') - 调用
range.insertNode(p)插入段落，再用range.collapse(false)把光标移到新段落末尾 - 禁用浏览器自动换行：CSS 加
white-space: pre-wrap，并移除所有<div>段落容器
不这么做，后端收到的 HTML 就是混合 <p>、<div>、<br> 的脏数据，清洗成本远高于前端主动规范。
粘贴 Word 或网页内容时，怎么防止样式爆炸和 XSS
直接 innerHTML 接收粘贴内容 = 主动引入风险。用户一粘就带 style、data-*、嵌套 <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>、<i>、<p>、<ul>等语义标签
最容易被忽略的是：移动端软键盘收起前，input 事件可能漏发一次，导致最后一次编辑没被捕获——别只依赖它，要结合 MutationObserver 监听 DOM 变化做兜底。
