必须先上传图片获取http/https外链，再通过dom操作或编辑器api插入；原生contenteditable需用selection api安全插入，quill需调用insertembed并确保格式注册与路径合法。
富文本编辑器里怎么插入上传后的图片链接
不能直接把本地文件路径塞进 img 标签——浏览器出于安全限制，file:// 路径在网页中无法加载，而且富文本容器（比如 contenteditable 区域或第三方编辑器）只认可 HTTP/HTTPS 协议的 URL。你必须先完成上传，拿到服务端返回的真实外链，再用 DOM 操作或编辑器 API 插入。
原生 contenteditable 中插入图片的正确流程
假设你用的是原生可编辑区域（没引入 TinyMCE、Quill 等），上传成功后拿到链接如 https://cdn.example.com/uploads/abc123.jpg，插入时要注意光标位置和 HTML 结构合法性：
- 用
document.execCommand('insertHTML', false, '<img src="...">')在光标处插入——但注意：Chrome 99+ 已废弃该 API，仅作兼容参考 - 更可靠的做法是获取当前选区：
const selection = window.getSelection()，然后创建img元素并插入到选区锚点节点 - 务必设置
img的alt属性，否则部分编辑器或无障碍工具会报错 - 避免直接拼接字符串插入，防止 XSS；确保链接已通过
URL.canParse()或正则校验（如^https?://）
使用 Quill 编辑器时插入远程图片的坑
Quill 默认不提供「插入图片」按钮逻辑，上传后需手动调用 editor.insertEmbed()，而不是改 dangerouslyPasteHTML()：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 调用前确认光标在编辑器内：
editor.getSelection()返回非null，否则插入会失败 - 正确写法：
editor.insertEmbed(index, 'image', 'https://...')，其中index是光标位置（可用editor.getSelection()?.index获取） - 如果图片未显示，请检查是否漏了注册
Image格式：Quill.register('formats/image', Image)（新版 Quill 2.x 默认已注册） - 服务端返回的链接若带空格或中文，必须用
encodeURIComponent()处理后再传入，否则解析会中断
上传后链接插入失败的常见原因
不是代码写错了，而是几个隐性环节断了链：
- 上传接口返回的是相对路径（如
/uploads/xxx.jpg），前端没补全 base URL，导致img.src变成http://localhost/uploads/xxx.jpg（404） - 富文本容器设置了
style="overflow: hidden"或max-height，图片加载后高度为 0，实际已插入但不可见 - 跨域图片被浏览器拦截（尤其开发时用 localhost 调用线上 CDN），控制台报
Cross-Origin Read Blocking，需服务端配Access-Control-Allow-Origin - 某些编辑器（如 Draft.js）要求图片作为「block entity」插入，硬塞
<img>标签会被过滤掉
真正卡住人的，往往不是“怎么插”，而是上传响应格式和服务端路径配置没对齐。先抓包看返回的链接能不能在新标签页直接打开，再动前端逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
