加了contenteditable="true"仍不可编辑，因非表单元素默认不可聚焦，须显式设tabindex="0"、清除css拦截（如user-select:none）、避免父级contenteditable="false"继承中断；还需监听input/paste事件、手动控制光标、安全读取textcontent。
直接写 contenteditable="true" 就能用，但上线前不处理 tabindex、CSS 拦截和事件监听，90% 的编辑区域会点不动、光标消失或粘贴乱码。
为什么加了 contenteditable="true" 还是点不了
浏览器根本不让你聚焦——不是属性没生效，而是元素默认不可聚焦，或者被样式拦住了。
-
tabindex缺失：<div>、<code><p></p>这类非表单元素必须显式加tabindex="0"（别用-1，那会禁键盘聚焦） - CSS 拦截：
user-select: none、pointer-events: none或没配:focus样式，会导致点击无响应或没视觉反馈 - 继承中断：父容器写了
contenteditable="false"，子元素哪怕写"true"也无效（“就近 false 优先”） -
input对纯文本输入、删除、回车换行有效，但对execCommand操作无反应 - 粘贴必须单独监听
paste事件，并调用event.preventDefault()，再手动取event.clipboardData.getData('text/plain')或用DOMPurify.sanitize()过滤 HTML - 移动端注意：iOS Safari 的
input在软键盘收起前可能漏发，可加beforeinput做补充（仅 Chrome/Firefox 支持较稳） - 纯文本场景：无条件用
textContent，它无视所有标签，只返回用户可见字符 - 需保留格式时：必须白名单过滤
innerHTML，比如只留<p></p>、<strong></strong>、<em></em>、<ul></ul>、<li>，strip 所有style和class - 别用正则清洗 HTML 字符串——易出错；可用
DOMParser解析后再遍历清理，安全且可控 - 必须手动用
Range+Selection控制：先range.selectNodeContents(el)，再range.collapse(false)（移到末尾），最后selection.addRange(range) - 如果元素内有空
<p></p>，selectNodeContents可能选中不可见节点，稳妥做法是先清空结构，用纯文本初始化 - SSR 渲染后首次
focus()可能失败（DOM 未就绪），需包裹在requestAnimationFrame或setTimeout(..., 0)中
实操建议：初始结构至少带 tabindex="0" 和基础 focus 样式，例如：<div contenteditable="true" tabindex="0" style="outline: 2px solid #007bff;">编辑我</div>
input 事件监听比 blur 更靠谱
blur 太滞后，用户切走再回来可能已改多处；input 才是实时捕获的关键，但它对格式操作（如加粗、粘贴富文本）不响应。
示例监听逻辑：el.addEventListener('input', () => console.log(el.textContent));——优先用 textContent 避免 HTML 噪声，除非业务明确需要保留 <strong></strong> 等语义标签。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
读取内容别碰 innerHTML，优先用 textContent
直接读 innerHTML 几乎总是错的：Chrome 回车插 <div>，Firefox 插 <code><p></p>，Safari 可能塞空 <p></p>；粘贴 Word 更会带 style、data-*、嵌套。这不是 bug，是规范允许的实现差异。
focus() 后光标常卡在开头或消失
调用 el.focus() 不等于光标就位。浏览器不会自动判断“该落在哪”，尤其空元素或含嵌套标签时，光标常停在开头、消失，或卡在空 <p></p> 里。
最易被忽略的是：动态启用编辑时，不能只靠 HTML 写死 contenteditable="true"——SEO 泄露、权限切换不同步、移动端失焦都由此而来；应 JS 控制 el.contentEditable = "true" + el.tabIndex = "0"，禁用时设为 "false" + "-1" + user-select: none。
