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，塞进 —— 这种形式几乎不被 sanitizer 拦截，但失去 SVG 的样式控制能力

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——它们各自有加载时机、作用域和净化规则，漏掉任意一环，图标就只活在源码里。