contenteditable="true" 需满足父级未禁用、无干扰css（如user-select:none）、避免内联元素；shadow dom需显式设置；document.execcommand已废弃，应改用selection/range api；粘贴需监听paste事件并domparser清洗；focus后需手动恢复选区。
contenteditable 属性怎么设才生效
直接加 contenteditable="true" 不一定让元素可编辑——浏览器会检查父级是否被禁用、CSS 是否设置了 user-select: none 或 pointer-events: none，甚至 display: contents 也会破坏编辑流。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先在
<div> 或 <code><section></section>上设置contenteditable="true"，避免用在<span></span>或内联元素上（光标行为异常） - 确保父容器没有
contenteditable="false"——该属性会强制继承，子元素无法覆盖 - 移除可能干扰的 CSS：
user-select设为text，caret-color显式声明颜色（尤其暗色背景时） - 若用在 Shadow DOM 内，需显式设置
contenteditable，Shadow 根节点不会自动透传 - 不要依赖
document.execCommand做核心逻辑，它不返回状态，也无法判断是否真的执行成功 - 如需兼容老环境，先用
document.queryCommandState('bold')检查支持性，再 fallback 到手动 DOM 操作 - 现代替代方案是操作
Selection和RangeAPI：获取当前选区 → 包裹节点 → 插入格式标签（如<strong></strong>），控制更细、可测性强 - 注意：
execCommand对自定义标签（如<my-button></my-button>）完全无效，它只认 HTML 标准语义标签 - 监听
paste事件，调用event.preventDefault()，再用event.clipboardData.getData('text/html')拿原始内容 - 用简易白名单解析：只保留
<p></p>、<strong></strong>、<em></em>、<ul></ul>、<li>，strip 所有style属性和class - 别用正则清洗 HTML 字符串——易出错；可用
DOMParser解析后再遍历清理，安全且可控 - 如果允许纯文本粘贴，直接取
event.clipboardData.getData('text/plain')，跳过 HTML 解析环节 - 聚焦后手动恢复选区：用
window.getSelection().removeAllRanges()+range.selectNodeContents(element)+selection.addRange(range) - 避免在
componentDidMount（React）或mounted（Vue）里立即 focus——DOM 可能未完成渲染，加setTimeout(..., 0)或queueMicrotask - 移动端 Safari 对
focus()调用更敏感，需确保元素已 visible 且非position: fixed覆盖 - 若内容为空，插入一个零宽空格
\u200B可防止光标“悬空”，这是很多富文本库的实际做法
为什么 document.execCommand 已废弃还总被提到
因为它是旧版富文本操作的事实标准，但 Chrome 89+、Firefox 87+ 已标记为 deprecated，Safari 更早开始限制；现在调用 document.execCommand('bold') 可能静默失败，或只在特定文档模式下工作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
粘贴富文本时样式乱飞怎么约束
用户从 Word 或网页复制内容进 contenteditable 区域，常带一堆冗余 style、嵌套 <span></span>、不可见字符，甚至 script 标签残留——这不是 bug，是规范行为：浏览器原样保留来源 HTML。
实操建议：
立即学习“前端免费学习笔记（深入）”；
focus 和 selection 在 contenteditable 里为什么总不同步
元素获得焦点（focus）不代表光标一定落在可编辑位置；常见现象：点击后光标消失、document.getSelection().rangeCount === 0、execCommand 报 “no selection” 错误。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正难的不是让文字可编辑，而是让每次输入、粘贴、撤销、格式切换都保持 DOM 结构干净、语义明确、光标位置可靠——这些细节没有银弹，得靠反复验证边界场景。
