Playwright 黑魔法用 ClipboardEvent 绕过 React 富文本编辑器注入内容做 Web 自动化Playwright / Puppeteer时最头疼的问题之一就是操作 React 生态的富文本编辑器。知乎的 Draft.js、字节的 Slate、各种contentEditable实现它们根本不认 DOM 直接修改。问题在哪很多新手会这样写page.evaluate(document.querySelector(.editor).innerHTML hello)编辑器毫无反应。为什么因为 React 管理着自己的虚拟 DOM你直接操作真实 DOM 它感知不到。编辑器内部的onChange/onInput事件根本没有触发。核心解法ClipboardEvent(paste)这些编辑器普遍监听了粘贴事件来接收外部内容。我们可以利用这一点**模拟一次粘贴操作**让编辑器以为用户从剪贴板粘贴了内容。思路如下1. 创建一个DataTransfer对象放入 HTML 内容2. 构造一个ClipboardEvent(paste)事件3. 直接在编辑器 DOM 元素上dispatchEvent核心代码const dt new DataTransfer(); dt.setData(text/html, htmlContent); // HTML 格式 dt.setData(text/plain, plainTextContent); // 纯文本兜底 const pasteEvent new ClipboardEvent(paste, { bubbles: true, cancelable: true, clipboardData: dt }); document.querySelector(.editor).dispatchEvent(pasteEvent);为什么这招好用**框架无关** — 不管是 Draft.js、Slate、ProseMirror 还是 Tiptap都监听 paste 事件**触发完整生命周期** — 编辑器的内容变更检测、字数统计、自动保存都会被正确触发**纯前端操作** — 不需要剪贴板权限没有安全限制Playwright 中的完整封装def inject_via_paste(page, selector, html_content): page.wait_for_selector(selector, statevisible) page.focus(selector) page.evaluate(({sel, html}) { const el document.querySelector(sel); const dt new DataTransfer(); dt.setData(text/html, html); dt.setData(text/plain, html.replace(/[^]/g, )); const event new ClipboardEvent(paste, { bubbles: true, cancelable: true, clipboardData: dt }); el.dispatchEvent(event); }, {sel: selector, html: html_content})注意事项内容中如果有图片需要优先上传到图床再替换为 CDN 链接部分编辑器会弹出检测到 Markdown 格式是否解析的确认框需要额外处理对于纯文本编辑器如小红书将 text/html 换成 text/plain 即可总结与其跟 React 的虚拟 DOM 死磕不如换个思路——模拟用户行为让编辑器自己处理内容。ClipboardEvent 方案在我的实战中已经稳定运行了知乎、掘金等多个平台的自动发布流程是目前绕过富文本编辑器最可靠的方式。