HTML5可视化编辑器插图标本质是注入或标签，非插入图片；需规避 sanitizer过滤、确保CSS加载、配置编辑器支持class及SVG特性。
HTML5 可视化编辑器里插图标，本质是加
绝大多数所谓“HTML5 可视化编辑器”（比如 GrapesJS、TinyMCE 插件、或低代码平台的富文本区）并不原生支持拖拽 SVG 图标库。你看到的“插入图标”按钮，背后其实是注入一段内联 ，或一个带 class 的 标签（如 Font Awesome）。直接上传 .png/.jpg 图标再插入，得到的是
- 优先用
：可直接写进 HTML，支持 fill/stroke 动态变色、CSS 控制尺寸、无障碍语义更清晰 - 若用字体图标（如 Font Awesome），必须确保编辑器所在页面已加载对应 CSS，并且编辑器允许保留 class 属性（很多富文本编辑器会 strip 掉
class） - 别依赖编辑器自带“图标库弹窗”——它可能只对接了过时的 FontAwesome 4 或不支持 SVG Sprite
在 GrapesJS 中手动注入 SVG 图标要绕过 sanitizer
GrapesJS 默认会过滤掉 和内联 style，直接 paste 一段 SVG 会被清空或转成空白占位符。关键不是“怎么加”，而是“怎么不让它被删”。
- 初始化时配置
avoidInlineStyle: false和allowScripts: true（仅开发环境，生产慎用） - 用
editor.DomComponents.addType('svg-icon', {...})注册自定义组件，把 SVG 写死在model.defaults.attributes.dangerouslySetInnerHTML里（GrapesJS v0.20+ 支持） - 更稳妥的做法：把 SVG 转成 data URL，塞进
TinyMCE / CKEditor 5 插入图标后图标不显示？先查三件事
不是图标没插进去，而是渲染环境缺失上下文。常见错误现象： 插进去了，但页面上只显示一个方框或空白。
- 检查编辑器输出的 HTML 是否被二次处理：比如 CMS 后端入库前用 DOMPurify 清洗，删掉了
class属性 - 确认 Font Awesome CSS 在「前端展示页」而非仅在编辑页加载——编辑器里看着正常，发布后失效，90% 是这个原因
- CKEditor 5 默认禁用
class属性，需显式在config.htmlSupport中启用：attributes: { classes: true }
用 iconfont.cn 的 SVG Symbol 方式，在可视化编辑中要手写
iconfont.cn 提供的 Symbol 引入方式最干净（单次加载，按需引用），但它要求你在 HTML 里写 ，而大多数可视化编辑器的“源码模式”不支持这种写法——href 会被转成 xlink:href（已废弃），或直接被过滤。
立即学习“前端免费学习笔记（深入）”；
- 解决方案：把整个
预加载到页面底部，然后在编辑器里只插入 - 注意路径：如果编辑器内容以 iframe 形式隔离（如某些低代码平台），
href必须指向绝对 URL，相对路径会 404 - 别用
：现代浏览器已弃用，且部分编辑器解析失败
真正麻烦的从来不是“怎么点那个按钮”，而是图标资源如何与编辑器的 DOM 生命周期、安全策略、输出管道对齐。SVG 不是图片，字体图标不是普通 class——它们各自有加载时机、作用域和净化规则，漏掉任意一环，图标就只活在源码里。
