★ FEATURED ARTICLE 前端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/toolbar/manual/hover/desktoprichcombo.md 展开讲解桌面端工具栏 Rich Combo下拉组合框如样式、格式选择器的悬停hover与按下toggled on视觉状态的验收标准。读者将掌握如何读懂并复跑该 Bender.js 手动测试、Rich Combo 三态状态机cke_combo_on/cke_combo_off/ disabled在源码与皮肤 CSS 中的具体实现以及该测试背后的 Bug #4611移动端误触悬停样式修复动机。一、测试文档定位Bug #4611 与手动回归测试desktoprichcombo.md是 CKEditor 4 仓库中一套**手动测试manual test**的说明文档文件头部三行元数据即指明了它的用途bender-tags: 4.16.1, 4611, bug bender-ui: collapsed bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo, formatbender-tags: 4.16.1, 4611, bug该测试标记为4.16.1版本引入、与issue #4611相关、类型为bug 回归验证bender-ui: collapsed手动测试页面以折叠 UI 呈现便于直接观察工具栏bender-ckeditor-plugins页面加载的插件集合为wysiwygarea、toolbar、stylescombo、format——前两者提供编辑区域与工具栏框架后两者恰好是仓库中两个典型的 Rich Combo 使用者样式组合框与格式组合框。Issue #4611 的修复记录可以在 CHANGES.md 中找到#4611: [Android, iOS] Fixed: Incorrect hover styles for buttons in the toolbar on mobile devices.即移动端设备由于不存在悬停概念却错误地应用了悬停样式导致按钮视觉状态混乱。本次桌面端测试正是为了保证修复没有破坏桌面端的正确行为——桌面端必须保留悬停样式且点击后的按下状态必须正常。二、测试步骤原文解读Moono-Lisa 皮肤测试文档的正文部分## Procedure (Moono-Lisa)要求测试者在Moono-Lisa皮肤下按以下三步执行检查 Rich Combo 是否有悬停样式背景变深期望结果存在悬停样式非期望结果不存在悬停样式。检查点击 Rich Combo 是否激活其按下toggled on状态背景变浅期望结果被点击的 Combo 呈现按下状态非期望结果被点击的 Combo 没有按下状态。对第二个编辑器重复以上流程。第 3 步中的第二个编辑器指向测试页模板中的两个编辑实例一个基于Iframewysiwygarea提供另一个基于Div通过divarea插件提供详见下文第三节。同一目录下的皮肤/设备变体矩阵tests/plugins/toolbar/manual/hover/目录下还存在同一逻辑的多个变体共同构成一套完整的回归矩阵设备皮肤文件DesktopMoono-Lisadesktoprichcombo.md本文档DesktopMoonodesktoprichcombomoono.mdDesktopKamadesktoprichcombokama.mdAndroid三种皮肤androidrichcombo*.mdiOS三种皮肤iosrichcombo*.md以 desktoprichcombomoono.md 为例Moono 皮肤的测试额外增加了一步Check if toggled on rich combos have hover styles (additional shadow, deeper pressed in combo).即在 Moono 皮肤下已处于按下状态的 Combo 仍要具备悬停样式附加阴影呈现更深按下效果。这说明不同皮肤对状态组合的视觉定义并不完全相同测试文档正是用来逐皮肤锁定这些细节。三、测试页面模板两个编辑器实例与皮肤动态注入所有 hover 手动测试共用同一个页面模板 tests/plugins/toolbar/manual/hover/template.html。模板的核心逻辑如下页面包含两个contenteditable容器#iframe-editor标题为 Iframe-based editor和#div-editor标题为 Div-based editor脚本通过当前页面 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;即文件名为desktoprichcombo.md时解析出expectedEnv desktop、skin moono-lisa若是desktoprichcombomoono.md则skin moono以此类推。皮肤名直接作为skin配置传入编辑器CKEDITOR.replace( iframe-editor, { skin: skin } ); CKEDITOR.replace( div-editor, { extraPlugins: divarea, skin: skin } );模板内置了isIgnoredEnv()环境判定通过navigator.userAgent判断当前是 Android、iOS 还是桌面环境。若与文件名期望的环境不匹配则调用bender.ignore()跳过该测试。例如在 Android 真机上打开desktoprichcombo测试时会被自动忽略从而保证每个测试只在正确的设备类别上执行。四、源码级原理一Rich Combo 的 DOM 结构Rich Combo 的渲染模板定义在 plugins/richcombo/plugin.js 中。其外层容器为cke_combo可点击区域为a.cke_combo_button内部依次是文本区cke_combo_text与下拉箭头区cke_combo_open/cke_combo_arrow-- .cke_combo ---------------------------------------------------------------------- | -- .cke_combo_label -- -- .cke_combo_button ---------------------------------- | | | | | -- .cke_combo_text -- -- .cke_combo_open -------- | | | | | | | | | -- .cke_combo_arrow -- | | | | | | | --------------------- ------------------------ | | | | ---------------------- ------------------------------------------------------ | -----------------------------------------------------------------------------------上面的结构示意图来自 skins/moono-lisa/richcombo.css 文件头的注释。值得注意的是cke_combo_label标签在视觉上是隐藏的但保留用于无障碍语义aria-labelledby引用它见 plugins/richcombo/plugin.js。而悬停/按下样式的舞台全部集中在a.cke_combo_button上。五、源码级原理二皮肤 CSS 中的三态视觉定义测试文档期望的悬停背景变深、点击后按下状态背景变浅在皮肤样式中有精确对应的实现。skins/moono-lisa/richcombo.css 定义了 Combo 的两种状态类/* 按下态on浅色背景 #fff深色边框 */ .cke_combo_on a.cke_combo_button, .cke_combo_off a.cke_combo_button:active { background: #fff; } /* 悬停/聚焦/激活态off hover较深背景 #e5e5e5 */ .cke_combo_on a.cke_combo_button, .cke_combo_off a.cke_combo_button:hover, .cke_combo_off a.cke_combo_button:focus, .cke_combo_off a.cke_combo_button:active { background: #e5e5e5; border: 1px solid #bcbcbc; /* 通过负 margin 让边框覆盖相邻分隔线 */ padding: 0 0 0 1px; margin-left: -1px; }对照测试步骤可以一一对应步骤 1 的悬停样式背景变深即a.cke_combo_button:hover时的background: #e5e5e5相对默认背景更深的灰色步骤 2 的点击激活 toggled on 状态背景变浅即.cke_combo_on类生效时background: #fff白色/更浅两套规则中border: 1px solid #bcbcbc与margin-left: -1px的组合是为了让高亮边框恰好覆盖 Combo 之间的垂直分隔线视觉上形成连续的按下效果。该文件还对 RTL 布局.cke_rtl和高对比度模式.cke_hcborder: 3px solid #000分别做了对称处理见 richcombo.css。关键hover: none媒体查询正是 #4611 的修复点同一个文件中紧接状态规则之后有一段带注释的媒体查询richcombo.css/* Disable hover styles on mobile devices (#4611). */ media screen and ( hover: none ) { .cke_combo_off a.cke_combo_button:hover { background: transparent; border-color: transparent; } /* We need to restore :active styles. */ .cke_combo_off a.cke_combo_button:active { background: #fff; border: 1px solid #bcbcbc; } }这正是 Bug #4611 的修复核心在hover: none触摸屏环境下禁用:hover样式同时保留:active点击反馈。桌面端测试文档要求必须有悬停样式是因为桌面设备hover: none不成立悬停样式必须照常工作。此外皮肤脚本 skins/moono-lisa/skin.js 通过模板字符串将 Combo 悬停/按下颜色与主题色板绑定{id} a.cke_combo_button:hover, {id} a.cke_combo_button:focus, {id} .cke_combo_on a.cke_combo_button [ border-color:{toolbarElementsBorder}; background-color:{darkBackground}; ] 这说明悬停/按下样式不只是写死的颜色而是随皮肤主题色darkBackground、toolbarElementsBorder联动这也是测试需要按 Moono-Lisa、Moono、Kama 三套皮肤分别验证的原因。六、源码级原理三Rich Combo 的 TRISTATE 状态机CSS 类cke_combo_on/cke_combo_off由 Rich Combo 组件的setState()方法控制实现在 plugins/richcombo/plugin.jssetState: function( state ) { if ( this._.state state ) return; var el this.document.getById( cke_ this.id ), linkEl el.getElementsByTag( a ).getItem( 0 ); el.setState( state, cke_combo ); state CKEDITOR.TRISTATE_DISABLED ? el.setAttribute( aria-disabled, true ) : el.removeAttribute( aria-disabled ); if ( linkEl ) { linkEl.setAttribute( aria-expanded, state CKEDITOR.TRISTATE_ON ); } this._.state state; }这里的关键调用链是el.setState( state, cke_combo )会依据CKEDITOR.TRISTATE_ON / OFF / DISABLED在容器上设置cke_combo_on/cke_combo_off/cke_combo_disabled类从而触发第五节中的皮肤规则同时同步维护无障碍属性禁用时设置aria-disabledtrue面板展开TRISTATE_ON时设置aria-expandedtrue。按下toggled on状态在源码中的生命周期非常清晰用户点击a.cke_combo_button触发clickFnplugin.js进入instance.execute()createPanel()创建浮层面板面板onShow回调中执行me.setState( CKEDITOR.TRISTATE_ON )并置me._.on 1plugin.js——此时 Combo 进入按下态浅色背景对应测试步骤 2面板隐藏时选择某项或按 EsconHide回调将状态恢复为TRISTATE_OFFplugin.js——按下态解除另外updateState()plugin.js监听activeFilterChange、mode、selectionChange、readOnly事件负责把 Combo 切换到TRISTATE_DISABLED如编辑器只读或当前模式不支持时并优先保证 Combo 处于展开状态时不抢改状态。值得注意的细节是execute()中的防重入逻辑plugin.js如果_.on为真面板已打开再次点击会直接panel.hide()收起面板而不是重复展开。这与点击一次变浅、再点一次恢复的交互直觉一致。七、测试中两个 Combo 的真实来源stylescombo 与 format 插件测试页加载了stylescombo与format两个插件它们分别通过editor.ui.addRichCombo()注册了名为Styles与Format的 Rich Comboplugins/stylescombo/plugin.jseditor.ui.addRichCombo( Styles, { ... panel: { multiSelect: true, ... } } )样式列表按块级/内联/对象类型分组plugins/format/plugin.jseditor.ui.addRichCombo( Format, { ... panel: { multiSelect: false, ... } } )格式列表段落、标题 H1–H6、预格式化等逐项添加。两者在init回调中通过this.add( value, previewHtml, label )填充列表项如 stylescombo/plugin.js并在onClick中执行editor.applyStyle()/removeStyle()。因此测试者在页面上看到的Rich Combo就是这两个真实业务组件验证的是用户实际会遇到的交互路径而非抽象测试桩。八、如何运行与验收这套手动测试该测试是 Bender.js 手动测试体系的一部分相关运行配置见仓库根目录 bender.js其中manualBrowsers定义了接受手动测试的浏览器列表。验收流程建议如下在桌面浏览器中打开由 Bender 服务器提供的手动测试页面对应desktoprichcombo条目将鼠标移入第一个编辑器的 Styles / Format 组合框确认背景变为较深的灰色#e5e5e5悬停样式单击组合框展开下拉面板确认按钮呈现较浅的按下态#fff背景 #bcbcbc边框关闭面板后对第二个Div 编辑器重复第 2、3 步如需覆盖其他皮肤切换至desktoprichcombomoonoMoono另需验证按下态上的附加悬停阴影与desktoprichcombokamaKama若在 Android / iOS 真机上验证 #4611 修复本身则使用对应的androidrichcombo*.md/iosrichcombo*.md变体——模板中的isIgnoredEnv()会自动忽略与当前设备不匹配的测试。判定标准即测试文档中的 Expected result悬停样式存在、点击后按下态存在且两个编辑器表现一致任一缺失即为 Unexpected result需要回归检查 skins/moono-lisa/richcombo.css 中的状态规则是否被hover: none或其他皮肤覆盖逻辑误伤。九、小结desktoprichcombo.md虽然只是一份寥寥数步的手动测试说明但它精确刻画了 CKEditor 4 工具栏 Rich Combo 的交互状态契约桌面端悬停必须呈现深色反馈、点击展开必须呈现浅色按下态且 Iframe / Div 两种编辑模式行为一致。其背后是plugins/richcombo的 TRISTATE 状态机cke_combo_on/cke_combo_off/ disabled 三态切换 ARIA 同步与皮肤 CSS 中:hover、:active、.cke_combo_on规则的协同而 #4611 的修复则以media screen and ( hover: none )精确隔离了移动端的伪悬停问题。读懂这份测试文档与对应源码即可完整掌握该交互的验收口径与实现机理。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐TanStack Table Angular 列分组Grouping完整指南从状态管理到分组行模型源码剖析TanStack Table Angular 列分组Grouping完整指南从状态管理到分组行模型源码剖析 导读 本文围绕 TanStack Table前端UI组件CKEditor 4 Android 端 Rich Combo 悬停样式修复Issue 4611 的回归测试设计与移动端 hover 行为解析CKEditor 4 Android 端 Rich Combo 悬停样式修复Issue 4611 的回归测试设计与移动端 hover 行为解析 导读 本文聚焦前端UI组件CKEditor 4 工具栏富组合框Rich Combo悬停样式回归测试指南以 Kama 皮肤桌面端手动测试为例CKEditor 4 工具栏富组合框Rich Combo悬停样式回归测试指南以 Kama 皮肤桌面端手动测试为例 在 CKEditor 4 中工具栏的「前端UI组件上一篇Spaceship Prompt Ruby 版本号提示段ruby section完整指南配置、触发逻辑与版本管理器兼容原理下一篇CAQL 连续动作 Q-Learning 实践指南面向 max-Q 问题的可插拔优化器设计与源码解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
