最可靠方式是直接监听 contenteditable 元素的 paste 事件，检查 clipboarddata.items 类型并调用 preventdefault()；旧版 safari/微信需 fallback 到 text/html 正则匹配；beforeinput 不适用于图片拦截。
如何阻止用户粘贴图片到 contenteditable 区域
直接监听 paste 事件，在事件中检查剪贴板内容类型，遇到 image/png、image/jpeg 等就调用 event.preventDefault() —— 这是最可靠且兼容性最好的方式。
别指望靠 dragover 或 drop 拦截粘贴：粘贴是独立行为，和拖拽无关；也别试图用 CSS 的 user-select: none 或 pointer-events: none，它们对粘贴完全无效。
实操建议：
- 在
contenteditable元素上绑定addEventListener('paste', handler)，不要只绑在document上，否则可能错过目标元素上下文 - 用
event.clipboardData?.items遍历所有DataTransferItem，检查item.type.startsWith('image/') - 注意 Safari 对
clipboardData.items支持较晚（iOS 16.4+/macOS 13.3+ 才稳定），旧版本需 fallback 到读取event.clipboardData?.files - 如果只想禁图片但放行文字，拦截后可手动插入纯文本：
document.execCommand('insertText', false, text)（已废弃但仍有用），或更现代的getSelection().getRangeAt(0).insertNode(document.createTextNode(text))
event.preventDefault() 在粘贴事件中为何有时失效
常见现象：加了 preventDefault()，图片还是进来了。根本原因通常是事件监听时机或目标错误 —— 比如监听在父容器而非实际 contenteditable 元素，或用了 once: true 导致只拦截第一次。
立即学习“前端免费学习笔记（深入）”；
另一个隐蔽原因是 Chrome/Edge 在某些组合操作下（比如 Ctrl+V 后立刻点击编辑区）会触发两次 paste 事件：一次带图片，一次带富文本 HTML。只拦第一轮，第二轮仍可能插入 base64 图片字符串。
实操建议：
- 确保监听器绑定在
contenteditable="true"的最内层元素（比如<div contenteditable="true">），而不是外层 wrapper <li>不要用 <code>onpaste属性写法，它无法可靠调用preventDefault()（尤其在 Shadow DOM 中） - 在 handler 开头立刻执行
event.preventDefault()，不要放在异步回调里 - 若发现 base64 图片仍出现，说明粘贴内容被转成了内联
<img src="data:image/..." alt="HTML5富文本禁止粘贴图片_HTML5ContentEditable拦截图片粘贴事件技巧【技巧】" >，此时需额外清理：在setTimeout(() => { ... }, 0)中扫描并移除新插入的<img alt="HTML5富文本禁止粘贴图片_HTML5ContentEditable拦截图片粘贴事件技巧【技巧】" >标签 - 先尝试
event.clipboardData?.items，有则按 MIME 类型判断；无则退到event.clipboardData?.getData('text/html') - 正则匹配
/<img alt="HTML5富文本禁止粘贴图片_HTML5ContentEditable拦截图片粘贴事件技巧【技巧】" >]+src=["']data:image\//i或/<img alt="HTML5富文本禁止粘贴图片_HTML5ContentEditable拦截图片粘贴事件技巧【技巧】" >]+src=["'][^"']*\.((png|jpe?g|gif|webp))/i - 微信安卓版偶尔会把图片转成远程 URL（如
https://mmbiz.qpic.cn/.../0），可一并加入过滤规则 - 避免过度依赖
getData('text/plain')：它在图片粘贴时通常为空或只有换行符，不可靠 - 把
beforeinput当作补充手段，比如用于限制粘贴后的格式净化（如去 style、去 class），而非拦截本身 - 永远以
paste事件为主力拦截点，beforeinput为辅 - 如果项目已用 MutationObserver 监控 DOM 变化，可在粘贴后快速扫描新增节点，作为最后防线清理漏网的
<img alt="HTML5富文本禁止粘贴图片_HTML5ContentEditable拦截图片粘贴事件技巧【技巧】" >
兼容旧版 Safari 和微信内置浏览器的降级方案
iOS Safari 15.x 及更早版本不支持 clipboardData.items，微信 WebView（基于 X5 内核）同样不返回有效 items，但会提供 clipboardData.files（仅当粘贴来源是本地文件时）或空对象。
这时唯一可用线索是 clipboardData.getData('text/html') 返回的字符串 —— 如果含 <img alt="HTML5富文本禁止粘贴图片_HTML5ContentEditable拦截图片粘贴事件技巧【技巧】" > 标签或 <code>data:image/，就大概率是图片粘贴。
实操建议：
为什么不能只靠 beforeinput 事件拦截
beforeinput 确实能捕获输入意图，但它对粘贴事件的支持极差：Chrome 仅在部分粘贴场景下触发，Safari 基本不触发，Firefox 完全不支持粘贴类型的 beforeinput。而且它的 inputType 值为 'insertFromPaste' 时，事件对象不携带任何剪贴板数据，无法判断是否含图片。
换句话说：beforeinput 无法替代 paste 事件做内容预检，它更适合处理键入、删除等确定性操作。
实操建议：
