contenteditable="true"需显式设置尺寸、禁用overflow/visibility隐藏、避免动态插入后立即focus；值推荐"true"而非空字符串；获取内容须区分innertext/textcontent/innerhtml并净化；监听应组合input/blur/compositionend；ios需加-webkit-user-select:text并规避fixed/transform布局。
contenteditable 是个布尔属性，设为 true 就能让任意 HTML 元素变成可编辑区域——但直接加就完事？别急，实际用起来有几个关键点卡得人很疼。
为什么 div 加了 contenteditable="true" 还不能输入？
最常见原因是元素没有尺寸或未触发渲染流：空 div 默认高度为 0，光标根本进不去。
- 确保它有最小高度，比如加
min-height: 1.2em或padding: 4px - 避免父容器设置了
overflow: hidden或visibility: hidden - 如果元素是动态插入的（比如 JS 创建后 append），需等 DOM 稳定再聚焦，否则 Safari 可能忽略首次 focus
contenteditable 的值用 "true" 还是 ""？
两者都有效，但语义和兼容性有差异：
-
contenteditable="true"：明确启用，所有现代浏览器支持，推荐用于主动控制场景 -
contenteditable（无值）或contenteditable=""：HTML5 规范允许，但部分旧版 IE 对空字符串解析不稳定 -
contenteditable="false"：显式禁用，会覆盖继承自父级的contenteditable设置
注意：contenteditable 是可继承属性——父元素设为 true，子元素默认也可编辑，除非显式设 false。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
编辑内容后怎么安全获取 HTML 或纯文本？
直接读 innerHTML 有风险：用户可能粘贴恶意脚本、嵌套非法标签、或留下不可见的 和
<br>。
- 取纯文本用
element.innerText（保留换行和空白结构）或element.textContent（更干净，但丢格式） - 取 HTML 内容优先用
element.innerHTML，但入库前必须做服务端净化（前端DOMPurify.sanitize()可作第一道过滤） - 监听变化别只靠
input事件——它不捕获右键粘贴、拖放、格式刷等操作；建议组合input+blur+compositionend
移动端 iOS 上光标错位、键盘闪退怎么办？
iOS Safari 对 contenteditable 的实现非常敏感，尤其在 flex/grid 布局或 fixed 定位容器里。
- 给编辑区域加
style="-webkit-user-select: text"，否则长按可能无法选中 - 避免在
position: fixed元素内嵌套contenteditable，滚动时键盘常失焦 - 如果用了
transform（如缩放或 translate），iOS 可能无法正确定位光标，临时方案是加will-change: transform或改用top/left - 不要在
focus回调里同步修改scrollTop或样式，容易触发键盘异常收起
真正麻烦的不是开启编辑，而是让编辑行为在各种设备上“不意外”——尤其是光标位置、粘贴逻辑、和焦点生命周期，这些细节没处理好，用户一粘贴就崩溃，比不能编辑还难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
