FileReader.readAsDataURL() 返回空字符串或乱码的主因是未等待 onload 事件即读取 result；须绑定 onload 回调再使用 reader.result，并校验文件类型、控制图片尺寸、慎用 background-image，同时注意 contenteditable 兼容性。
拖拽文件后 FileReader.readAsDataURL() 返回空字符串或乱码
常见原因是未正确监听 load 事件，而是在 readAsDataURL() 调用后立即取 result——此时读取尚未完成。必须等事件触发后再访问 reader.result。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 绑定
reader.onload = () => { img.src = reader.result; }，不要在readAsDataURL()后直接读reader.result - 检查文件类型：
if (!file.type.match('image.*')) return;，避免非图片文件触发解析失败 - 注意 Safari 对 Data URL 长度限制较严，超大图（如 >5MB）可能渲染异常，可加
file.size 做前置拦截
拖拽进入编辑器区域时页面自动跳转或刷新
这是浏览器默认拖放行为未被阻止导致的。HTML 编辑器容器（如 contenteditable 区域或 div）收到 dragover 和 drop 事件时，若不显式调用 preventDefault()，浏览器会尝试打开文件或导航到它。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给目标容器绑定
dragover和drop事件，并在两个事件处理器中都调用e.preventDefault() -
dragover还需加e.stopPropagation()，防止事件冒泡干扰父级编辑器逻辑 - 只对图片文件启用预览：在
drop中用e.dataTransfer.files取文件列表，过滤出image/类型
Base64 图片插入后在 contenteditable 区域无法选中或光标错位
直接插入 <img src="data:..."> 到富文本编辑器中，容易破坏 DOM 结构完整性。部分编辑器（如 Quill、TinyMCE）会自动清理或重写内联标签，导致图片消失或光标卡死。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 插入前包裹一层
<span contenteditable="false">或<figure>，避免编辑器误操作图片节点 - 插入后手动将光标移到图片后：用
range.setStartAfter(img); range.collapse(true); selection.removeAllRanges(); selection.addRange(range); - 避免使用
document.execCommand()（已废弃），改用insertNode()或appendChild()精确控制位置
预览图显示模糊或尺寸失控
Base64 图片本身无宽高属性，浏览器按原始尺寸渲染，常导致撑破容器或过小不可见。CSS 的 max-width: 100% 不足以应对所有情况，尤其当父容器为 contenteditable 且含内联样式时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 插入
<img>时强制设置style="max-width: 100%; height: auto; display: block;" - 若需保持比例缩放，用 JS 读取原始尺寸：
img.onload = () => { img.style.width = Math.min(img.naturalWidth, 600) + 'px'; }; - 慎用
background-image: url(data:...)替代<img>，因 background 不支持自然宽高，也无法被复制或右键保存
Base64 预览看似简单，但真正稳定运行要同时跨过事件流、编辑器 DOM 管理、图片尺寸策略三道坎；最容易被忽略的是 contenteditable 对不可编辑子节点的兼容性处理——哪怕加了 contenteditable="false"，某些编辑器仍会尝试劫持其 focus 行为。
