前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载本文围绕 CKEditor 4 官方仓库中的手动测试用例 tests/plugins/emoji/manual/cors.md 展开剖析 Emoji 插件面板在跨域CORS环境下分组导航图标显示为空白这一已知缺陷Issue #2607的成因、源码级修复方案以及对应的手动与自动化验证方法。读完本文你将理解 SVGuse跨文档引用与同源策略的冲突点掌握 CKEditor 4 通过把图标资源本地注入面板文档绕过 CORS 限制的实现细节并能复现和回归该问题。一、问题背景Emoji 面板的分组导航图标从何而来CKEditor 4 的 Emoji 插件plugins/emoji/plugin.js提供两种插入 emoji 的途径自动补全在编辑器中输入:加至少 2 个字符如:fa弹出联想建议框对应手动用例 tests/plugins/emoji/manual/emoji.md 中的描述Emoji 面板点击工具栏上的 Emoji 按钮打开一个带分组导航的完整面板。面板顶部有一条横向导航栏将 emoji 按people人物、nature自然、food食物、travel旅行、activities活动、objects物体、symbols符号、flags旗帜8 个分组排列分组定义见 plugin.js。点击某个分组图标emoji 列表会滚动到对应分区导航条下方的蓝色指示线随滚动位置联动相关交互用例见 tests/plugins/emoji/manual/dropdown/dropdownnavgationandstatus.md。这些导航图标的绘制方式在 plugin.js 的createGroupsNavigation()中分两种浏览器情况处理支持 SVG 的浏览器非 IE或 IE Edge渲染svguse href#cke4-icon-emoji-N/use/svg引用 SVG 雪碧图文件 plugins/emoji/assets/iconsall.svg 中预先定义的symbol idcke4-icon-emoji-2~cke4-icon-emoji-10符号不支持 SVG 的旧浏览器改用位图雪碧图 plugins/emoji/assets/iconsall.png通过 CSSbackground-position按 21×21 像素格子定位取图源码中ICON_SIZE 21。下图即导航图标所用的位图雪碧图资源二、Bug 场景CORS 环境下导航图标空白Issue #2607手动用例 cors.md 记录了这次缺陷修复的核心验收标准其 tags 声明为4.14.1, bug, emoji, 2607对应 CHANGES.md 中 4.14.1 版本的变更条目[#2607]: Fixed: The Emoji plugin SVG icons file is not loaded in CORS context.触发场景当页面通过外部 CDN跨域加载ckeditor.js时Emoji 面板是在编辑器 iframe 文档panel._.iframe.getFrameDocument()中渲染的。修复前导航图标依赖 SVGuse href#cke4-icon-emoji-N引用一个跨域 URL 下的iconsall.svg文件——浏览器出于同源策略会阻止跨域 XML/SVG 资源的读取与符号引用解析导致use指向的符号找不到最终导航图标渲染为空白。症状与验收标准cors.md 原文操作步骤打开 emoji 面板Open emoji panelExpected预期面板导航图标可见Panel navigation icons are visibleUnexpected非预期面板导航图标空白Panel navigation icons are blank。三、源码级修复把 SVG 图标本地注入面板文档针对 #2607CKEditor 4 在 4.14.1 中给出的方案非常直接不再让面板跨域去引用 SVG 雪碧图而是把雪碧图内容加载后塞进面板所在文档的 body 中使use href#id变成同文档内的符号引用从而彻底绕开跨域限制。核心实现在 plugin.js 的loadSVGNavigationIcons()源码注释原话为To avoid CORS issues due to XML-based SVG icons, they should be loaded into the panel document. This method ensures that the icons are loaded locally.其执行流程通过CKEDITOR.ajax.load( CKEDITOR.getUrl( this.plugin.path assets/iconsall.svg ), callback )以 AJAX 方式读取 SVG 雪碧图内容创建一个div容器并添加类名cke_emoji-navigation_icons把雪碧图 HTML 内容setHtml()到容器中将容器append到面板文档this.blockElement.getDocument()的body中。这样symbol定义就存在于面板文档 DOM 内部导航栏中的svguse href#cke4-icon-emoji-2/use/svg便能在当前文档内解析到符号无需发起跨域请求。该方法的调用时机在 createEmojiBlock() 的开头注释同样标注了(#2607)即每次构建面板内容时先确保图标已注入随后再依次渲染分组导航、搜索框、emoji 列表和状态栏。注入的隐藏容器由样式表 plugins/emoji/skins/default.css 控制.cke_emoji-navigation_icons { display: none; }即图标定义容器对用户不可见仅作为符号仓库存在导航栏中真正的图标由.cke_emoji-inner_panel nav li svg等样式控制尺寸与透明度hover 时由opacity: 0.4变为1激活分组有蓝色底边.active { border-bottom: 5px solid rgba(44, 195, 255, 1); }。四、手动测试用例解析复现环境与操作步骤与 cors.md 配套的手动测试页面是 tests/plugins/emoji/manual/cors.html它精心构造了能稳定复现该缺陷的 CORS 环境通过iframe idplayground隔离测试环境避免 Bender 自动加载的 CKEditor 影响结果iframe 文档内通过doc.write()注入指向CDN 域名rawcdn.githack.com的ckeditor.js这正是跨域加载编辑器的典型 CORS 场景再写入div ideditor并执行CKEDITOR.replace( editor, { plugins: wysiwygarea,toolbar,emoji } )文件注释明确提示CDN 指向的是包含修复的 commit3ab1c74c...如需验证修复前的失败表现可将 script 替换为 4.14.0 版本的 CDN 地址页面开头还做了环境守卫仅在 IE 11 以下时bender.ignore()跳过测试避免冻结旧浏览器。按 cors.md 手动验收时打开 emoji 面板观察面板顶部分组导航栏若导航图标可见分组符号正常显示hover 变深、点击可滚动列表则修复生效若图标为空白说明资源加载仍受 CORS 影响回归失败。五、自动化回归测试断言图标确实注入面板文档除手动用例外仓库还提供了对应的 Bender 自动化测试 tests/plugins/emoji/dropdown.js测试名为test SVG icons support同样标注(#2607)。其验证逻辑与手动测试完全对应若this.editor.plugins.emoji.isSVGSupported()为假旧 IE直接assert.ignore()跳过打开EmojiPanel面板获取面板 iframe 的文档对象panel._.iframe.getFrameDocument()再次用CKEDITOR.ajax.load读取assets/iconsall.svg并放入一个临时div作为期望值断言面板文档中存在.cke_emoji-navigation_icons容器且其 HTML 与从资源加载的内容一致assert.beautified.html(...)并输出断言信息 Icons should be loaded as a part of panel。该用例确保图标成为面板文档的一部分这一修复行为在后续版本中不会被破坏。同一文件还覆盖了导航相关行为如点击导航项滚动列表、滚动时active高亮跟随、ckeditor.js载入后点击导航不误滚页面等见 dropdown.js 中的多个test navigation ...用例。六、兼容性降级与相关机制修复并非对所有浏览器都走 SVG 路径源码中的环境判定值得注意isSVGSupported()return !CKEDITOR.env.ie || CKEDITOR.env.edge;——非 IE 浏览器与 IE Edge 才使用 SVG 图标其余 IE 版本退回 PNG 雪碧图路径此时不涉及iconsall.svg的跨域问题isSupportedEnvironment()!CKEDITOR.env.ie || CKEDITOR.env.version 11——emoji 插件整体只支持 IE 11 及以上旧 IE 直接不初始化即便使用 SVG 路径createGroupsNavigation() 还针对 Safari 做了特殊处理iOS 读取use的href属性存在已知问题因此 Safari 下改用已废弃但兼容的xlink:href#{svgId}其余浏览器用标准href。另外emoji 列表本身默认 plugins/emoji/emoji.json也通过CKEDITOR.ajax.load异步加载可通过config.emoji_emojiListUrl指向自定义域名详见 plugin.js 中该配置的 JSDoc 注释——自定义列表同样应确保目标地址允许跨域读取否则会沿用与图标类似的问题模式。七、小结维度内容缺陷Emoji 面板分组导航图标在 CORSCDN 加载编辑器环境下空白#2607根因SVGuse href#id跨域引用iconsall.svg受同源策略限制无法解析符号修复loadSVGNavigationIcons()用CKEDITOR.ajax.load读取雪碧图并注入面板文档 body隐藏容器.cke_emoji-navigation_icons使引用变为同文档解析验证手动用例 cors.md iframe CDN 环境 cors.html自动化回归见 dropdown.js版本CKEditor 4.14.1见 CHANGES.md这个案例的价值在于它演示了在富文本编辑器的多文档编辑器 iframe 面板 iframe架构下跨域静态资源引用是极易被忽略的暗坑而把符号定义本地化注入目标文档是一种零网络开销、对用户无感的优雅解法。若你的集成环境同样通过 CDN 分发 CKEditor 4且用到 Emoji 插件升级到 4.14.1 及以上并运行上述手动用例即可确认该问题已修复。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 自定义配置加载竞态条件3361的修复原理与手动验证指南CKEditor 4 自定义配置加载竞态条件 3361的修复原理与手动验证指南 导读 本文围绕 CKEditor 4 仓库中一份 Bender 手动测试文档前端UI组件Zoplicate插件导致Zotero标签栏加载问题的分析与修复Zoplicate插件导致Zotero标签栏加载问题的分析与修复 问题背景 Zoplicate作为Zotero的插件在最新版本中出现了一个影响用户体验的兼容性桌面应用知识管理CKEditor 4 源码模式切换后 Autocomplete 键盘导航失效的回归测试与修复原理CKEditor 4 源码模式切换后 Autocomplete 键盘导航失效的回归测试与修复原理 本文以 CKEditor 4 仓库中的手动测试用例 tests前端UI组件上一篇Prism Launcher 离线启动器不用微软账号6 步离线启动 Minecraft下一篇ticket-purchase 大麦自动抢票实测从克隆到跑通 15 分钟只需填对 5 个值创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考