富文本编辑器拖拽上传需理清拖放、剪贴板、输入事件职责：dragover/drop接收外部文件，paste处理截图及粘贴图片，均统一走“文件→Blob→上传→插入HTML”流程。
富文本编辑器中实现拖拽上传文件，关键不是堆砌事件，而是理清剪贴板、拖放、输入三类事件的职责边界与协作时机。核心在于：拖放（dragover/drop）负责接收外部文件，剪贴板（paste）负责处理粘贴进来的文件或图片（含截图），而编辑器光标位置决定插入点——三者最终都应统一走“文件转 Blob → 上传 → 插入 HTML”这一管道。
拖放事件：拦截原生行为，提取文件并定位插入点
用户把文件拖进编辑器区域时，浏览器默认会跳转或打开文件。必须在 dragover 中调用 event.preventDefault()，否则 drop 根本不会触发。同时，drop 里要从 event.dataTransfer.files 拿到 File 对象，而不是依赖 items 或 types（兼容性差）。
- 监听编辑器容器（如
contenteditable的 div）的dragover和drop -
drop中检查event.dataTransfer.files.length > 0，过滤掉非文件项（如纯文本拖拽） - 用
getSelection()+range.insertNode()或execCommand('insertHTML')（旧版）将占位符或预览图插入当前光标处
粘贴事件：区分内容类型，专治截图和本地图片粘贴
paste 事件不只响应 Ctrl+V，也响应 QQ 截图、微信截图、OS X 的 Cmd+Shift+4 粘贴等。这些操作产生的往往是 image/png 类型的 clipboardData.items，而非 files。不能只看 clipboardData.files（它通常为空）。
- 在
paste回调中遍历event.clipboardData.items - 对每个 item，用
item.type.startsWith('image/')判断是否为图片，再用item.getAsFile()（旧 API）或item.getAsString()+new Blob([str], {type: item.type})（新环境）转为可上传的 Blob - 若粘贴的是 HTML（如网页图片），需解析
clipboardData.getData('text/html')提取<img src="data:image/...">的 base64 数据并转 Blob
统一上传与插入逻辑：避免重复编码，保持状态一致
拖放、粘贴、甚至点击上传按钮，最终都要走同一套流程：读取文件 → 显示加载态 → 上传 → 获取 URL → 插入 <img src="xxx"> 或带上传进度的占位符。建议封装成一个函数，如 handleFiles(files: File[], insertAtCursor = true)。
立即学习“Java免费学习笔记（深入）”；
- 用
FileReader读取为 data URL 用于临时预览（避免上传前空白） - 上传时携带唯一 ID（如
Date.now() + Math.random()），便于后续替换 DOM 中对应占位符的src - 插入时生成带
data-upload-id属性的<img>，上传成功后通过该属性定位并更新
边界情况兜底：禁用默认行为、防重复触发、兼容旧浏览器
某些场景下事件会意外重叠：比如拖拽文件到编辑器再松开，可能同时触发 drop 和 paste；Safari 对 contenteditable 的 paste 支持不稳定；IE11 需用 window.clipboardData。
- 在
drop和paste处理开始时加节流（如 300ms 内忽略后续同类型事件） - 对
dragenter做简单样式反馈（如加 border），但不要在其中阻止默认行为，仅dragover需preventDefault - IE11 下检测
event.clipboardData === undefined，改用window.clipboardData.files或getData('Text')解析 base64 img
