企业官网建设流程全解析

• 前端
• UI组件

导读

本文以 CKEditor 4 官方测试库tests/core/skin/manual/moonomultiselect.md为线索，完整还原 4.18.0 版本中一个真实 bug 的发现、复现与修复过程：<select>元素带有multiple属性（即多选下拉框）时，在 Moong 皮肤下选中项丢失灰色高亮，选中与未选中项视觉上无法区分。读者将掌握 CKEditor 皮肤 reset 样式的作用机制、option:checked伪类的正确用法，以及如何通过 Bender 手动测试套件验证皮肤渲染缺陷。

测试文档定位：一场"选中即消失"的渲染事故

在 tests/core/skin/manual/ 目录下，moonomultiselect.md 是一份 Bender 手动测试用例的元数据文件。其头部通过@bender-*标签声明测试环境：

@bender-tags: 4.18.0, bug, 5044 @bender-ckeditor-plugins: widget, wysiwygarea @bender-ui: collapsed

• @bender-tags表明该用例属于 4.18.0 版本的 bug 回归测试，编号直接对应 GitHub issue#5044；
• @bender-ckeditor-plugins声明测试页只需加载widget与wysiwygarea两个插件，保证最小化复现环境；
• @bender-ui: collapsed指示 Bender 运行器以折叠 UI 方式嵌入该测试。

文档正文给出了三段式复现步骤：点击 "Open dialog" 按钮 → 在多选下拉中选择一个或多个元素 → 在下拉框失焦（点击下拉框外部）后观察选中项。判定标准非常明确：

Expected：选中的元素应呈现灰色高亮（gray highlight）。Unexpected：选中项无高亮，与未选中项无法区分。

复现场景还原：测试页如何构造多选下拉

与 .md 元数据配套的 moonomultiselect.html 是真正的复现载体。它在页面中放置了一个div#editor与一个初始disabled的 "Open dialog" 按钮，随后通过CKEDITOR.dialog.add()动态注册名为mydialog的对话框：

CKEDITOR.dialog.add( 'mydialog', function() { var fruitArray = [ [ 'Apples' ], [ 'Bananas' ], [ 'Cherries' ] ]; return { title: 'Sample dialog for plugin test', contents: [ { id: 'tab1', label: 'Label', title: 'Title', elements: [ { type: 'hbox', children: [ { type: 'select', id: 'fruitSelect', label: 'Select some fruit', multiple: true, // 关键：开启多选 items: fruitArray, size: fruitArray.length, style: 'height:100%' } ] } ] } ] }; } );

这段代码揭示了 bug 触发的最小三要素：

编辑器实例通过CKEDITOR.replace( 'editor', { skin: 'moono', ... } )显式指定moono皮肤，把问题锁定在皮肤样式而非编辑器核心逻辑上；同时借助instanceReady事件在编辑器就绪后注册对话框并解除按钮的disabled状态，确保交互时序正确。此外，脚本开头还有一段移动端守卫：

if ( bender.tools.env.mobile ) { return bender.ignore(); }

即移动端环境下直接跳过该用例，说明此 bug 的复现范围限定在桌面浏览器的鼠标交互场景。

症状与根因：多选下拉在 moono 皮肤下丢失选中高亮

症状描述

在复现页中打开对话框、选中若干项后再点击框外使<select>失去焦点，被选中的<option>立刻失去视觉反馈——既无高亮背景也无颜色变化，与未选中项看起来完全一样。用户无法确认自己选择了哪些项，更无法在不重新聚焦的情况下核对选择结果。

根因分析：皮肤 reset.css 的"重置"使命

CKEditor 4 的每个皮肤都带有一个reset.css，其核心职责是把编辑器内部（对话框、面板等）DOM 的浏览器默认样式全部抹平，再交由皮肤各自的dialog.css、editor.css等文件重新塑造统一外观。问题就出在这个"抹平"动作上。

以 skins/moono/reset.css 为例，其第 112–115 行给出了修复后的关键规则：

.cke_reset_all select[multiple] option:checked { background-color: rgb(206, 206, 206); }

修复前，reset.css对<select>的全局重置（如统一边框、去掉系统控件差异）连同浏览器为option:checked提供的默认高亮一并被覆盖或压制，导致多选模式下选中项在失焦后没有可见背景。修复的核心正是显式声明option:checked的灰色背景（rgb(206, 206, 206)），把"选中即高亮"这一行为从浏览器默认样式迁移为皮肤自身可管理的规则。

值得注意的是，这一修复并非 moono 独有，而是三套皮肤统一落地：

三份文件中的规则完全一致，因此同样的手动测试在 kama 与 moono-lisa 皮肤下也各有对应的用例（见 tests/core/skin/manual/ 下的kamamultiselect.md、moonolisamultiselect.md及其同名 .html）。

源码侧印证：multiple属性如何进入 DOM

修复只落在 CSS 层，但为了确认规则命中正确的 DOM 结构，需要回到 dialogui 插件的生成逻辑。在 plugins/dialogui/plugin.js 中，selectUI 元素定义（约第 583–654 行）明确支持以下元素定义字段：

• items（必填）：选项数组，每项形如[ 'Description', 'Value' ]；省略Value时值等于描述文本；
• multiple（可选）：置true即生成多选下拉框；
• size（可选）：下拉框可见行数，与multiple搭配时原生表现为带滚动条的列表框。

其构造逻辑中，属性通过以下代码被写入最终<select>标签：

if ( elementDefinition.size !== undefined ) attributes.size = elementDefinition.size; if ( elementDefinition.multiple !== undefined ) attributes.multiple = elementDefinition.multiple;

也就是说，multiple: true会被原样透传为<select multiple>的 HTML 属性，这正是select[multiple] option:checked这条 CSS 选择器能够命中的前提。同时，items中每一项经CKEDITOR.tools.htmlEncode()转义后生成<option value="...">描述</option>，保证测试文本（如 "Apples"）安全渲染。

发布记录佐证：4.18.0 变更日志中的官方定性

在 CHANGES.md 的 4.18.0 版本"Fixed issues"小节中，可以找到与测试标签完全对应的官方记录：

#5044：Fixed:selectelements withmultipleattribute had incorrect styling. Thanks to John R. D'Orazio!

这句话给出了三个事实：该问题是 4.18.0 正式修复；根因被官方定性为"带multiple属性的<select>样式错误"；修复由社区贡献者 John R. D'Orazio 提交。测试目录中三份*multiselect.md全部标注4.18.0, bug, 5044，正是为了防止该回归再次出现而建立的手动回归屏障。

手动验证：把测试跑起来

这类.md+.html配对文件属于 Bender 手动测试套件，需要浏览器人工交互确认视觉效果，适合验证纯渲染类缺陷。运行方式与仓库其他 Bender 用例一致：

1. 在仓库根目录启动 Bender 测试服务器（端口配置见 bender-runner.config.json，默认服务端口 9001、服务器端口 9002，Linux 下默认浏览器为 Chrome 与 Firefox）；
2. 在测试列表中选择core/skin/manual下的moonomultiselect用例；
3. 按文档步骤操作：点击 "Open dialog" → 选择 "Apples"、"Bananas" 等一个或多个选项 → 点击下拉框外部使其失焦；
4. 对照判定标准：若选中项保持rgb(206, 206, 206)灰色背景即为 Expected；若高亮消失即为 Unexpected（即 bug 复现）。

移动端环境下用例会被bender.ignore()跳过，因此验证时请使用桌面浏览器。

从该案例可复用的排查方法论

• 先看皮肤 reset 层：CKEditor 4 中凡是"编辑器外框（对话框、面板）内控件样式异常"的问题，第一排查点都应是对应皮肤的reset.css——它是所有控件样式被"归零"的地方，也是最容易覆盖浏览器默认行为的位置；
• 用属性级选择器精确圈定控件形态：select[multiple] option:checked同时限定元素类型、形态与状态，避免误伤普通单选框的下拉样式；
• 用最小化插件组合复现：测试页只加载widget与wysiwygarea，把干扰因素降到最低，是值得复用的复现策略；
• 多皮肤联动修复：同一规则同时落入 moono、moono-lisa、kama 三套皮肤的 reset.css，验证修复时需在三套皮肤下分别回归（对应目录中的三份 multiselect 用例）。

结语

moonomultiselect 这份手动测试文档记录了一次典型的"样式重置误伤"案例：皮肤为统一观感抹平浏览器默认样式时，误伤了多选下拉的选中态反馈，最终通过在reset.css中显式声明select[multiple] option:checked的高亮背景解决。从 issue 编号、测试标签、对话框构造代码到三套皮肤的统一修复，整条链路在仓库中均有据可查——这也是排查 CKEditor 4 皮肤类渲染问题的绝佳样板。

• 前端
• UI组件