企业官网建设流程全解析

• 前端
• UI组件

本文以 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, language

• @bender-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：用例运行所需的插件组合——wysiwygarea（iframe 编辑区）、toolbar（工具栏）、basicstyles（提供 Bold/Italic 等可切换命令）、language（提供lang命令）。

2. 测试模板：双编辑器 + 按文件名自动匹配皮肤与环境

该目录下的所有手动测试共用同一个 HTML 模板template.html。理解模板才能明白「为什么要重复操作第二个编辑器」以及「Kama 皮肤是如何被自动选中的」。

模板会创建两个并排的编辑器实例：

• Iframe 编辑器：将<div id="iframe-editor">通过CKEDITOR.replace替换为基于wysiwygarea的 iframe 编辑区；
• Div 编辑器：同样替换<div id="div-editor">，但额外传入extraPlugins: 'divarea'，使其成为基于divarea的 div 型编辑区（内容直接渲染在页面 div 中）。

两者的初始化配置都只指定了skin：

CKEDITOR.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 皮肤的期望视觉效果以蓝色系为特征：

1. 检查按钮是否具备悬停样式（浅蓝色背景）
   • 预期结果：鼠标悬停时按钮出现 hover 样式。
   • 意外结果：按钮没有任何 hover 样式。
2. 检查点击按钮是否进入切换开启状态（更深的蓝色背景）
   • 预期结果：被点击的按钮呈现 toggled on 状态。
   • 意外结果：点击后按钮没有呈现 toggled on 状态。
3. 检查已处于 toggled on 状态的按钮是否仍有悬停样式（背景进一步加深）
   • 预期结果：开启状态下悬停仍有 hover 样式。
   • 意外结果：开启状态下悬停没有任何样式变化。
4. 在第二个（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_on
• CKEDITOR.TRISTATE_OFF→ 添加cke_button_off
• CKEDITOR.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默认为'cke'：

case 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 中有着一一对应的定义：

注意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.md（Moono-Lisa）与desktopbuttonmoono.md（Moono）验证同样的步骤，但视觉判定标准不同：

• Kama：以蓝色系背景深浅区分状态（本用例主题）。
• Moono：a.cke_button_on使用内阴影box-shadow: 0 1px 5px rgba(0,0,0,.6) inset+ 灰色渐变背景，悬停时阴影加深，视觉上表现为「按钮按下去更深」（参见 skins/moono/toolbar.css）。
• Moono-Lisa：a.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组件