前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载导读本文基于 CKEditor 4 官方仓库中的手动测试用例 iosbuttonkama.md系统讲解工具栏按钮Button在 iOS 触屏设备上 hover 样式行为的历史缺陷issue #4611、CSS 修复原理media (hover: none)媒体查询、Kama 皮肤三档按钮状态的配色体系以及如何在 Bender 测试框架下按步骤执行手动验收、区分预期与意外结果。读完本文你将掌握 CKEditor 4 工具栏按钮状态机与皮肤样式的对应关系能够独立复现、验证并扩展移动端 hover 相关测试。一、背景触屏设备上的伪 hover 困境与 issue #46111.1 问题现象在传统桌面端:hover伪类由鼠标悬停触发语义清晰。但在 iOS / Android 等触屏设备上浏览器为了兼容桌面站点的交互会在手指按下touch期间临时把元素视为:hover状态导致 CKEditor 工具栏按钮在按下的过程中就提前显示 hover 背景色而不是等到手指松开后才呈现。这种按压即高亮的行为会造成两个视觉问题按压期间就出现 hover 样式与按钮点击后的反馈toggled on 状态混叠用户难以区分正在按与已经选中松开手指后hover 样式应有的闪现flash反馈丢失交互层次感被破坏。该问题在 CHANGES.md 的 4.16.1 版本记录中被明确归类为缺陷修复#4611: [Android, iOS] Fixed: Incorrect hover styles for buttons in the toolbar on mobile devices.1.2 修复思路用hover: none区分设备能力修复的核心手段是 CSS 媒体查询media screen and ( hover: none )。该查询在设备不具备悬停能力即无法用指针悬停、只能触摸时命中从而在移动端覆盖掉默认的:hover规则同时保留并恢复:active规则保证按压反馈仍然存在。以 Kama 皮肤的工具栏样式 skins/kama/toolbar.css 为例桌面端默认规则为a.cke_button_on:hover, a.cke_button_on:focus, a.cke_button_on:active { background-color: #86caff; } a.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active { background-color: #dff1ff; opacity: 1; } /* 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 { background-color: #dff1ff; opacity: 1; } a.cke_button_on:active { background-color: #86caff; } }可以清晰看到修复策略的两层含义在移动端把:hover的样式还原为未悬停的默认外观cke_button_off:hover变回透明背景、opacity: 0.7cke_button_on:hover还原为 toggled on 的基准色#a3d7ff。这样手指按压期间按钮外观不会提前高亮。显式恢复:active样式因为触屏设备上:hover与:active往往同时命中若只禁用 hover按压反馈也会丢失因此注释明确写着 We need to restore :active styles.把#dff1ffoff 态按压与#86caffon 态按压重新赋予:active。同样的修复也应用到组合框Rich Combo组件上见 skins/kama/richcombo.css 与 skins/moono/richcombo.css说明该问题同时影响了工具栏按钮和下拉组合控件两类 UI 元素。二、Kama 皮肤下工具栏按钮的三种视觉状态手动测试文档以 Kama 皮肤为验收对象用浅蓝色 / 深蓝色 / 更深蓝色描述三档状态。对应源码实现如下见 skins/kama/toolbar.css状态CSS 选择器背景色含义未激活offa.cke_button_off透明背景opacity: 0.7功能可用但当前未生效悬停 / 聚焦 / 按压off 态a.cke_button_off:hover,:focus,:active#dff1ff浅蓝且opacity: 1用户正在与该按钮交互已激活ona.cke_button_on#a3d7ff深蓝功能已生效如正在输入粗体已激活后的悬停 / 按压a.cke_button_on:hover,:focus,:active#86caff更深蓝对已激活按钮的交互反馈注释中也说明了类名语义cke_button_on表示与该按钮关联的功能处于激活状态例如正在输入粗体或拼写检查已开启见 skins/kama/toolbar.csscke_button_off表示功能可用但当前未激活另有cke_button_disabledopacity: 0.3表示功能不可用如剪贴板为空时粘贴按钮置灰。因此文档中的三处描述一一对应hover 样式light-blue background → off 态交互色#dff1fftoggled on 状态darker blue background → 激活态#a3d7fftoggled on 按钮的 hover 样式even darker blue background → 激活态交互色#86caff。三、按钮状态机的源码实现toggled on 从何而来toggled on 状态并非皮肤 CSS 凭空定义而是由按钮 UI 组件的状态机驱动。核心实现在 plugins/button/plugin.js 的setState方法setState: function( state ) { if ( this._.state state ) return false; this._.state state; var element CKEDITOR.document.getById( this._.id ); if ( element ) { element.setState( state, cke_button ); element.setAttribute( aria-disabled, state CKEDITOR.TRISTATE_DISABLED ); if ( this.isToggle !this.hasArrow ) { element.setAttribute( aria-pressed, state CKEDITOR.TRISTATE_ON ); } return true; } return false; }其中element.setState( state, cke_button )负责把三态值映射为 CSS 类名cke_button_on/cke_button_off/cke_button_disabled从而切换背景色同时同步aria-pressed与aria-disabled属性保证无障碍语义与视觉状态一致。按钮定义中的isToggle标志默认false见 plugins/button/plugin.js决定按钮是否为开关型——只有开关型按钮在命令执行后才会在TRISTATE_ON与TRISTATE_OFF之间切换。例如basicstyles粗体、斜体等插件注册的命令即为开关型这正是测试文档元数据中加载basicstyles插件的原因用它来验证点击后按钮进入 toggled on 状态。四、手动测试用例完整解读4.1 Bender 元数据测试的身份标识文档头部是 Bender 手动测试manual test的元数据声明见 iosbuttonkama.mdbender-tags: 4.16.1, 4611, bug bender-ui: collapsed bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, languagebender-tags标记该测试对应的版本4.16.1、issue 编号4611与类型bug便于在 Bender 结果面板中按标签筛选bender-ui: collapsed测试页面 UI 折叠展示仅保留编辑器主体减少无关干扰bender-ckeditor-plugins声明本用例需要加载的插件——wysiwygareaiframe 版编辑区、toolbar工具栏渲染、basicstyles提供粗体/斜体等开关型命令用于验证 toggled 状态、language提供语言选择命令。4.2 测试环境与页面结构该目录下的手动测试共用同一个 HTML 模板template.html页面包含两个编辑器#iframe-editor基于iframe的经典编辑器wysiwygarea#div-editor基于div的编辑区通过extraPlugins: divarea启用。模板脚本从 URL 路径中正则解析测试环境与皮肤(android|ios|desktop)(?:button|richcombo)(moono|kama)?并用isIgnoredEnv()判断当前浏览器环境是否匹配不匹配时调用bender.ignore()跳过测试。皮肤名缺省时回退为moono-lisa。因此本文档文件名含ios与kama要求在 iOS 设备iPad / iPhone / iPod上使用 Kama 皮肤分别验证两个编辑器——这也是文档第 4 步要求对第二个编辑器重复该过程的原因。4.3 四步验收流程原文完整步骤步骤 1检查 off 态按钮在长按期间与松开后的 hover 行为对工具栏按钮长按并松开手指观察预期结果手指按压期间不出现 hover 样式浅蓝色背景松开手指的瞬间hover 样式闪现flash一下随后按钮进入 toggled on 状态。意外结果按压期间就出现 hover 样式松开手指后没有出现 hover 样式的闪现。步骤 2检查点击后按钮的 toggled on 状态预期结果被点按的按钮处于 toggled on 状态深蓝色背景#a3d7ff。意外结果按钮未进入 toggled on 状态。步骤 3检查 toggled on 按钮的 hover 行为对已经处于 toggled on 状态的按钮再次长按并松开预期结果按压期间不出现 hover 样式更深的蓝色#86caff松开手指瞬间 hover 样式闪现后按钮回到 off 状态。意外结果按压期间就出现 hover 样式松开后没有闪现。步骤 4对页面中的第二个编辑器divarea 版重复上述全部过程。提示所谓闪现正是移动端:hover在手指离开后仍短暂保留一瞬的浏览器行为。修复后按压期间无 hover松开瞬间 hover 出现又随状态切换而消失形成一次极短的高亮反馈让用户感知按下 → 生效的完整过程同时由于修复把按压期间的高亮移除了用户不会再误读正在按下为已选中。4.4 该用例的验收意义这份手动测试本质上是 issue #4611 修复的回归验收清单。四个步骤分别覆盖了off 态按钮的交互反馈时序按压中 vs 松开后点击后状态切换的正确性toggled onon 态按钮的交互反馈时序按压中 vs 松开后两种编辑区实现iframe 与 divarea下行为的一致性。只有全部步骤符合预期结果才能认定hover: none修复在 iOS Kama 组合下未引入回归。五、测试矩阵同一缺陷的多维度覆盖tests/plugins/toolbar/manual/hover/目录下共有 18 个手动测试文件构成一个完整的交叉矩阵从三个维度覆盖 #4611设备环境android、ios、desktop桌面端用于确保修复未破坏原有的 hover 行为UI 组件button普通按钮、richcombo下拉组合框皮肤kama、moono、moono-lisa缺省。对应关系如下组件 / 环境KamaMoonoMoono-Lisa按钮 - 桌面desktopbuttonkama.mddesktopbuttonmoono.mddesktopbutton.md按钮 - iOSiosbuttonkama.mdiosbuttonmoono.mdiosbutton.md按钮 - Androidandroidbuttonkama.mdandroidbuttonmoono.mdandroidbutton.md组合框 - 桌面desktoprichcombokama.mddesktoprichcombomoono.mddesktoprichcombo.md组合框 - iOSiosrichcombokama.mdiosrichcombomoono.mdiosrichcombo.md组合框 - Androidandroidrichcombokama.mdandroidrichcombomoono.mdandroidrichcombo.md桌面端用例如 desktopbuttonkama.md的预期结果与之相反——桌面端必须有hover 样式这确保了hover: none媒体查询只在触屏设备生效不误伤桌面鼠标体验。另外Moono 皮肤同样包含media (hover: none)修复块见 skins/moono/toolbar.css说明该修复是皮肤层面的通用策略而非 Kama 独有。六、如何运行该手动测试该用例属于 Bender 手动测试manual test体系需要通过 Bender 测试服务器打开页面由测试人员在真实设备上按步骤执行。项目测试基础设施配置见 bender.js测试框架为yuiframework: yui已加载的 Bender 插件包括benderjs-coverage、benderjs-yui、benderjs-sinon、benderjs-jquery、tests/_benderjs/ckeditor与benderjs-yui-beautified测试分组中Plugins组以tests/为基准路径、匹配plugins/**因此tests/plugins/toolbar/manual/下的用例会被收录见 bender.js。运行步骤面向仓库查看与测试执行者安装依赖npm installBender 相关依赖见 package.json 的 devDependencies启动 Bender 服务并运行手动测试模式对应bender run配合--manual或手动测试入口具体以 benderjs 文档为准随后在浏览器中打开 Bender 手动测试列表在iOS 真机或模拟器iPad / iPhone / iPod上打开本用例页面页面会自动加载两个编辑器iframe 版与 divarea 版并应用 Kama 皮肤文件名含kama若当前访问设备并非 iOS模板脚本会调用bender.ignore()跳过本用例按 4.3 节的四步流程逐项操作在 Bender 面板中勾选通过 / 失败将实际行为与预期结果比对。需要特别说明的适用前提本用例必须在 iOS 环境 Kama 皮肤下执行才有效其他设备/皮肤组合应选择矩阵中对应的其他用例hover: none媒体查询的生效与否同时取决于浏览器对 Media Queries Level 4 悬停特性的支持程度。七、结语一条缺陷修复的完整闭环从 issue #4611 出发CKEditor 4 在皮肤层用media screen and ( hover: none )精准区分了能悬停的桌面指针与只能触摸的移动设备在移动端移除按压期间的伪 hover 高亮、保留按压:active反馈与松开瞬间的 hover 闪现在测试层用tests/plugins/toolbar/manual/hover/下 18 个用例组成设备 × 组件 × 皮肤的回归矩阵其中 iosbuttonkama.md 负责 iOS Kama 按钮组合的四步验收。理解了这层 CSS 策略与测试矩阵你不仅能在 CKEditor 4 上复现并验证该修复也能把同样的hover 能力检测 移动端去伪悬停 恢复 active方法论迁移到自己的富文本编辑器或任意 Web 组件库中。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 Moono 皮肤 iOS 工具栏按钮 Hover 样式手动测试指南4611CKEditor 4 Moono 皮肤 iOS 工具栏按钮 Hover 样式手动测试指南 4611 导读 本文围绕仓库中的 Bender 手动测试用例 te前端UI组件CKEditor 4 工具栏按钮 Android 移动端 Hover 样式回归测试解读 4611 修复与 Bender 手工测试流程CKEditor 4 工具栏按钮 Android 移动端 Hover 样式回归测试解读 4611 修复与 Bender 手工测试流程 本文围绕 CKEdito前端UI组件CKEditor 4 移动端工具栏 Rich Combo Hover 样式问题验证指南iOS 手动测试与 4611 修复原理CKEditor 4 移动端工具栏 Rich Combo Hover 样式问题验证指南iOS 手动测试与 4611 修复原理 本文以 CKEditor 4 仓前端UI组件上一篇cAdvisor BigQuery 存储驱动完全指南实验性后端接入、Service Account 认证与数据模型解析下一篇IntelliJ IDEA 大型项目卡顿自救指南8个提速技巧让开发流畅度翻倍创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考