contenteditable 是最轻量原生实时编辑方案，但需手动补足换行处理、富文本粘贴过滤、事件监听组合（input/compositionend/blur）、焦点管理（tabindex="0"）、右键禁用、移动端与无障碍支持（role="textbox"、css修复）及安全内容获取。
contenteditable 是最轻量、原生支持实时编辑的方案，不用引入任何库，但默认行为和可访问性需要手动补足。
为什么直接加 contenteditable="true" 不够用
浏览器会允许用户输入、选中、粘贴，但不会自动处理换行（回车生成 <div> 而非 <code><br>）、不阻止富文本粘贴污染结构、不响应 input 事件（得监听 compositionend 和 input 组合捕获）、且焦点管理混乱——比如点击空白处光标可能落在父容器外。
常见错误现象：Uncaught TypeError: Cannot read property 'innerHTML' of null（因监听了未挂载元素的事件）；粘贴 Word 内容后样式错乱；移动端双击无法全选文字。
- 必须显式设置
tabindex="0"才能通过键盘获得焦点 - 推荐用
<div contenteditable="true" tabindex="0"></div>，而非<p></p>或<span></span>，后者在部分 Safari 版本中表现异常 - 禁用默认右键菜单：加
oncontextmenu="return false"，否则可能触发浏览器拼写检查浮层干扰编辑
contenteditable 的值该设为 "true" 还是 ""（空字符串）
两者等效，但语义不同：contenteditable="true" 显式声明启用，contenteditable（无值）是 HTML5 合法布尔属性写法。实际运行没区别，但团队协作时建议统一用 "true"，避免被误认为遗漏赋值。
注意：设为 "false" 不会继承禁用，子元素仍可设为 "true" 覆盖；而设为 "plaintext-only"（实验性）仅在部分 Chromium 浏览器生效，不推荐用于生产。
- 不要写
contenteditable={true}（React JSX 中会转成字符串"true"，没问题），但避免contenteditable={false}—— 它会变成contenteditable="false"，即启用编辑（因为非空字符串都视为 true） - 服务端渲染时，确保 SSR 输出的初始 HTML 包含
contenteditable="true"，否则 hydration 后 React 可能忽略该属性变更
如何安全获取和同步编辑内容
不能只依赖 element.innerHTML，它会包含冗余标签（如 <span style="color:red"></span>）、不可见字符（ 零宽空格）、甚至脚本片段（若未过滤）。更稳妥的是用 element.innerText 获取纯文本，或用 element.textContent（保留换行符但不解析 HTML）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
监听变更时，别只绑 input：Safari 对 contenteditable 的 input 事件触发不全，需组合监听：
-
input：覆盖键盘输入、删除、粘贴（部分场景） -
compositionend：捕获中文输入法上屏瞬间 -
blur：作为兜底，防止快速切换焦点漏掉变更
示例绑定逻辑（原生 JS）：
const el = document.querySelector('[contenteditable]');
const handleChange = () => {
const raw = el.innerHTML;
const clean = raw.replace(/]*>/g, '').replace(/\s+/g, ' ').trim();
console.log('当前纯文本：', clean);
};
el.addEventListener('input', handleChange);
el.addEventListener('compositionend', handleChange);
el.addEventListener('blur', handleChange);
移动端和无障碍支持的关键补丁
iOS Safari 默认禁用 contenteditable 的缩放与光标定位，需加 CSS 强制启用：
-
user-select: text：允许长按选择 -
-webkit-user-modify: read-write：修复 iOS 光标不可见问题 -
outline: none+border: 1px solid #ccc：提供视觉焦点反馈（否则屏幕阅读器无法识别可编辑状态） - 必须设置
role="textbox"和aria-label，否则 VoiceOver / TalkBack 会读作“group”而非“edit text”
性能提示：避免在 input 回调里直接操作 DOM 或触发重排；高频输入下，可用 requestIdleCallback 节流内容同步逻辑。
最易被忽略的一点：如果页面用了 transform 或 will-change 提升图层，iOS 上 contenteditable 光标可能错位或消失——此时需给编辑区单独加 transform: translateZ(0) 或移除父级提升。
