前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载本文以 CKEditor 4 仓库中的 Bender 手动测试用例 desktopbuttonkama.md 为核心讲解如何在桌面环境下系统验证 Kama 皮肤下工具栏按钮的悬停hover样式、点击切换toggled on状态以及二者叠加时的视觉反馈并顺带对比 Moono、Moono-Lisa 皮肤与移动端Android/iOS的差异。读完本文你将掌握 CKEditor 4 工具栏按钮状态类cke_button_on/cke_button_off/cke_button_disabled的底层实现原理以及如何借助仓库中的手动测试模板独立复现和排查此类视觉回归问题。1. 测试用例背景一次针对 #4611 的视觉回归验证desktopbuttonkama.md属于 tests/plugins/toolbar/manual/hover 目录下的系列手动测试其头部元数据揭示了它的用途bender-tags: 4.16.1, 4611, bug bender-ui: collapsed bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, languagebender-tags: 4.16.1, 4611, bug该用例随 CKEditor 4.16.1 引入对应缺陷编号 #4611。查阅 CHANGES.md 中 4.16.1 版本的修复列表可以看到[#4611]: [Android, iOS] Fixed: Incorrect hover styles for buttons in the toolbar on mobile devices.也就是说这个系列用例最初是为了验证「移动设备上工具栏按钮悬停样式错误」这一缺陷的修复而desktopbuttonkama.md则是该缺陷修复后针对桌面环境 Kama 皮肤组合的回归验证。bender-ui: collapsed测试面板默认折叠便于直接观察编辑器界面。bender-ckeditor-plugins用例运行所需的插件组合——wysiwygareaiframe 编辑区、toolbar工具栏、basicstyles提供 Bold/Italic 等可切换命令、language提供lang命令。2. 测试模板双编辑器 按文件名自动匹配皮肤与环境该目录下的所有手动测试共用同一个 HTML 模板template.html。理解模板才能明白「为什么要重复操作第二个编辑器」以及「Kama 皮肤是如何被自动选中的」。模板会创建两个并排的编辑器实例Iframe 编辑器将div idiframe-editor通过CKEDITOR.replace替换为基于wysiwygarea的 iframe 编辑区Div 编辑器同样替换div iddiv-editor但额外传入extraPlugins: divarea使其成为基于divarea的 div 型编辑区内容直接渲染在页面 div 中。两者的初始化配置都只指定了skinCKEDITOR.replace( iframe-editor, { skin: skin } ); CKEDITOR.replace( div-editor, { extraPlugins: divarea, skin: skin } );skin变量由页面 URL 的文件名通过正则解析得到var pathRegex /(android|ios|desktop)(?:button|richcombo)(moono|kama)?/i, match location.pathname.match( pathRegex ), expectedEnv match[ 1 ], skin match[ 2 ] ? match[ 2 ] : moono-lisa;文件名中带kama的用例如desktopbuttonkama→skin kama文件名中带moono的用例如desktopbuttonmoono→skin moono不带皮肤后缀的用例如desktopbutton.md→ 默认使用moono-lisa。模板还通过isIgnoredEnv对运行环境做了约束根据navigator.userAgent判断当前设备是 Android、iOS 还是桌面若与文件名中的环境前缀不符则调用bender.ignore()跳过该用例。因此desktopbuttonkama.md只应在桌面浏览器中执行这保证了「hover 样式」的验证对象确实是具备鼠标悬停能力的设备。3. 完整测试步骤Kama 皮肤desktopbuttonkama.md的正文共 4 步前 3 步面向第一个iframe编辑器第 4 步要求在第二个div编辑器上重复全部检查。Kama 皮肤的期望视觉效果以蓝色系为特征检查按钮是否具备悬停样式浅蓝色背景预期结果鼠标悬停时按钮出现 hover 样式。意外结果按钮没有任何 hover 样式。检查点击按钮是否进入切换开启状态更深的蓝色背景预期结果被点击的按钮呈现 toggled on 状态。意外结果点击后按钮没有呈现 toggled on 状态。检查已处于 toggled on 状态的按钮是否仍有悬停样式背景进一步加深预期结果开启状态下悬停仍有 hover 样式。意外结果开启状态下悬停没有任何样式变化。在第二个div 型编辑器上重复上述全部步骤。小贴士第 2 步适合用basicstyles的 Bold/Italic 按钮验证——将光标放入内容区后点击 Bold按钮即进入cke_button_on状态再次点击则退出。language插件提供的按钮也是典型可切换按钮。4. 源码级解读按钮的三种状态与样式类测试步骤中的「toggled on」对应 CKEditor 按钮 UI 的三种逻辑状态。状态切换由 plugins/button/plugin.js 中的setState驱动核心逻辑是把状态值映射为样式类名与 ARIA 属性CKEDITOR.TRISTATE_ON→ 添加cke_button_onCKEDITOR.TRISTATE_OFF→ 添加cke_button_offCKEDITOR.TRISTATE_DISABLED→ 添加cke_button_disabled按钮所关联命令command的状态变化会通过command.on( state, ... )监听并同步到按钮plugins/button/plugin.js样式类名与aria-pressed/aria-disabled属性的落地则由底层 DOM 工具 core/dom/element.js 的setState( state, base, useAria )完成其中base默认为ckecase CKEDITOR.TRISTATE_ON: this.addClass( base _on ); this.removeClass( base _off ); this.removeClass( base _disabled ); useAria this.setAttribute( aria-pressed, true ); ...5. Kama 皮肤下的视觉实现三档蓝色测试期望中描述的三种蓝色在 skins/kama/toolbar.css 中有着一一对应的定义测试步骤视觉期望对应 CSS 规则实际取值步骤 1普通按钮悬停浅蓝色背景a.cke_button_off:hover, :focus, :activebackground-color: #dff1ff; opacity: 1步骤 2点击切换开启更深蓝色背景a.cke_button_onbackground-color: #a3d7ff步骤 3开启状态悬停更深一档蓝色a.cke_button_on:hover, :focus, :activebackground-color: #86caff注意a.cke_button_off的默认opacity: 0.7悬停时恢复为opacity: 1并叠加#dff1ff背景而a.cke_button_on本身已是高亮蓝色悬停时再加深到#86caff——这正是测试期望「even darker blue」的出处。同时 CSS 中还有.cke_hc高对比度模式下的特殊处理a.cke_button_on通过加粗边框border-width: 3px代替颜色来表达状态对无障碍访问更友好。6. 三款皮肤的差异对照与移动端修复同目录下的姊妹用例desktopbutton.mdMoono-Lisa与desktopbuttonmoono.mdMoono验证同样的步骤但视觉判定标准不同Kama以蓝色系背景深浅区分状态本用例主题。Moonoa.cke_button_on使用内阴影box-shadow: 0 1px 5px rgba(0,0,0,.6) inset 灰色渐变背景悬停时阴影加深视觉上表现为「按钮按下去更深」参见 skins/moono/toolbar.css。Moono-Lisaa.cke_button_on为白色背景 边框悬停为#e5e5e5浅灰参见 skins/moono-lisa/toolbar.css。三个皮肤的工具栏 CSS 中都包含同一条针对 #4611 的关键修复——用 CSS 媒体查询在无悬停能力的设备上关闭 hover 样式例如 Kama 皮肤中的写法skins/kama/toolbar.css/* Disable hover styles on mobile devices (#4611). */ media screen and ( hover: none ) { a.cke_button_off:hover { background: transparent; opacity: 0.7; } a.cke_button_on:hover { background-color: #a3d7ff; } /* We need to restore :active styles. */ a.cke_button_off:active { ... } a.cke_button_on:active { ... } }其含义是在触屏设备上「悬停」并不可靠触摸会先触发 hover 再触发 click若不关闭:hover样式点击按钮时会闪现错误的悬停背景。因此移动端只保留:active按下瞬间的反馈同时保留:hover声明但还原为与基础状态一致的取值保证视觉不抖动。moono与moono-lisa的 toolbar.css 与 toolbar.css 中也有完全同构的媒体查询块。7. 如何运行与扩展这套手动测试该目录下同时存在移动端验证用例androidbutton.md、androidbuttonkama.md、androidbuttonmoono.md、iosbutton.md等以及针对下拉组件richcombo的同系列用例desktoprichcombo*.md。验证 #4611 的完整修复效果时应按「桌面/Android/iOS × button/richcombo × 皮肤」组合逐一执行。手动测试由 Bender 测试框架驱动项目根目录的 bender.js、bender.ci.js启动测试服务后在浏览器中打开对应用例页面即可按步骤操作。若你需要在自定义皮肤中复现同样的状态视觉设计可直接参考 skins/kama/toolbar.css 中a.cke_button_on、a.cke_button_off:hover、a.cke_button_on:hover三组规则的取值与顺序并务必保留media screen and ( hover: none )移动端降级逻辑。8. 结论desktopbuttonkama.md虽然只有一份简短的步骤清单却完整覆盖了 CKEditor 4 工具栏按钮状态视觉体系的核心验证点普通悬停、切换开启、开启态悬停三者的视觉可区分性且要求同时在 iframe 与 div 两种编辑区上确认。结合 skins/kama/toolbar.css 的状态样式、plugins/button/plugin.js 的状态同步、core/dom/element.js 的类名切换以及 CHANGES.md 中的 #4611 修复记录可以清晰还原一条从「缺陷报告 → CSS 媒体查询修复 → 多环境回归测试」的完整链路——这也是 CKEditor 4 处理 UI 视觉回归的标准范式。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 工具栏按钮悬浮与切换状态验证指南以 Moono 皮肤桌面端手动测试为例Bug 4611CKEditor 4 工具栏按钮悬浮与切换状态验证指南以 Moono 皮肤桌面端手动测试为例Bug 4611 本指南围绕 CKEditor 4 仓库中的手前端UI组件CKEditor 4 皮肤工具栏箭头定位测试指南以 kama 皮肤按钮箭头回归用例为例CKEditor 4 皮肤工具栏箭头定位测试指南以 kama 皮肤按钮箭头回归用例为例 导读 本文围绕 CKEditor 4 仓库中 tests/core/s前端UI组件CKEditor 4 Moono 皮肤 iOS 工具栏按钮 Hover 样式手动测试指南4611CKEditor 4 Moono 皮肤 iOS 工具栏按钮 Hover 样式手动测试指南 4611 导读 本文围绕仓库中的 Bender 手动测试用例 te前端UI组件上一篇AO3镜像站终极指南5分钟解锁全球同人创作平台的免费访问方案下一篇终极指南5分钟掌握AO3镜像站免费访问方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考