必须显式写contenteditable="true"才生效，因firefox和safari忽略无值或空值；仅设属性不处理paste、input等事件会导致粘贴崩样式、光标错位等问题。

直接加 contenteditable="true" 就能让 <div> 可编辑，但不处理后续行为，90% 的项目会在粘贴、回车、光标定位或移动端上翻车。 <h3>为什么不能只写 <code>contenteditable 而不写值？

Firefox 和 Safari 会忽略 contenteditable（无值）或 contenteditable=""。必须显式写成 contenteditable="true" 才生效。另外两个合法值是 "false"（禁用）和 "inherit"（继承父级），但后者兼容性差，实际极少用。

常见错误：

• 把 contenteditable 加在 <input> 或 <textarea></textarea> 上——浏览器静默忽略
• 父容器设了 contenteditable="false"，子元素即使写 "true" 也无效（“就近 false 优先”）
• 服务端渲染（SSR）页面首次 focus() 失败，因为 DOM 尚未就绪，得包一层 requestAnimationFrame

input 事件监听不够用，还缺哪些事件？

input 对键盘输入响应及时，但对中文输入法上屏、右键粘贴、拖拽插入、Ctrl+Z/Y 撤销重做等行为基本不触发。真实场景中内容变更常来自 DOM 变动而非按键。

推荐组合监听：

• input：覆盖大部分键盘输入
• compositionend：捕获中文拼音完成上屏那一刻
• blur：兜底防失焦未保存
• MutationObserver：监控子节点变化，尤其插入图片、链接等富文本操作时

别在 input 回调里直接读 innerHTML ——如果用户粘贴了含 <script></script> 的 HTML，脚本会被执行。

粘贴 Word 或网页内容后样式崩了，怎么净化？

浏览器原生粘贴会带进大量冗余标签、style 属性、嵌套 <span></span>，甚至不可见字符。不能依赖后端清洗，前端显示已错乱。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

实操路径：

• 监听 paste 事件，第一时间 event.preventDefault()
• 优先走纯文本路线：event.clipboardData.getData('text/plain') + document.execCommand('insertText', false, text)（虽已废弃，但目前最稳）
• 若需保留简单格式（如 <p></p>、<strong></strong>、<ul></ul>），用 DOMParser 解析 'text/html'，递归遍历只保留白名单标签，剔除所有 style、class、width、height
• 上线前务必用 DOMPurify.sanitize() 过滤最终存库的 HTML

光标总卡住或定位不准，怎么手动控制？

JS 调用 focus() 后，光标大概率不在末尾，尤其元素初始为空或含空 <p></p>。必须用 Range + Selection 主动控制。

关键点：

• 别用 selectNodeContents(el)，它可能选中不可见文本节点，导致光标“消失”
• 稳妥做法：先清空结构（如用 textContent = '' 初始化），再插入纯文本，最后创建 Range 定位到末尾
• 动态渲染（React/Vue）或执行 execCommand 后，浏览器常丢失光标位置，需在变更后立即恢复
• 移动端 Safari 光标定位极不稳定，建议加 role="textbox" 提升可访问性兼容性，并确保元素有 tabindex="0"

复杂交互下，光标管理不是“一次设置就完事”，而是每次 DOM 变更后都要重新同步——这点最容易被忽略。