★ 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/tableselection/manual/integrations/basicstyles/native.md这份手动回归测试文档展开讲解当 Table Selection表格选择插件与 Basic Styles基础样式插件协同工作时原生选区 加粗操作的正确行为与已知缺陷修复路径并结合仓库源码与自动化测试验证其底层原理。读完本文你将掌握如何复现并验证该回归场景、Table Selection 的视觉选区fake selection机制如何与样式命令协作以及 #941 问题在 4.13.0 中的修复方式。一、测试文档背景这是怎样的一份文档native.md位于仓库的 tests/plugins/tableselection/manual/integrations/basicstyles/ 目录是一份 Bender.js 手动回归测试manual test说明。Bender.js 是 CKEditor 4 自带的测试运行器见仓库根目录 bender.js 与 bender.ci.js手动测试通过bender-*注释头声明运行环境与插件组合正文则是供测试人员逐条执行并核对预期结果的步骤清单。该文档头部声明了三项关键测试元数据bender-ui: collapsed bender-tags: bug, 4.13.0, 941 bender-ckeditor-plugins: wysiwygarea, toolbar, tableselection, basicstylesbender-ui: collapsed测试页面默认折叠编辑器 UI避免干扰手动操作bender-tags: bug, 4.13.0, 941该用例针对一个 bug 回归目标版本为 4.13.0对应 GitHub issue #941bender-ckeditor-plugins加载wysiwygarea经典可编辑区、toolbar、tableselection、basicstyles四个插件构成最小可复现组合。同一目录下的姊妹测试 basicstyles.md 则覆盖通过视觉选区fake selection框选多个单元格后应用样式的另一个回归场景对应 issue trac167554.7.0。两份文档互为补充一份验证原生选区路径一份验证视觉选区路径。二、手动测试步骤与预期结果逐条解读2.1 完整测试步骤native.md给出的操作流程如下打开浏览器开发者控制台Open console。使用原生选区native selection选中第一个单元格中的文本。点击工具栏上的Bold加粗按钮。预期结果文本被加粗选区自动切换为视觉选区Text is bolded, selection changes into visual selection。再次点击Bold按钮。预期结果文本取消加粗视觉选区保持不变Text is unbolded, visual selection is preserved。意外结果控制台抛出异常Console registers exception。2.2 为什么要分两步验证这个测试的设计非常典型第一步验证原生选区 → 样式应用 → 自动切换为视觉选区的转换链路是否顺畅第二步验证在视觉选区基础上再次切换toggle样式是否幂等且不会破坏选区。两步合起来恰好覆盖了 issue #941 描述的故障场景在启用 Table Selection 插件时对使用原生选区选中的表格单元格文本应用样式会抛出错误。从 CHANGES.md 的 4.13.0 版本变更记录可以找到对应修复条目Fixed: An error is thrown after styling a table cell text selected using the native selection when the Table Selection plugin is enabled.即#941 的修复正是原生选区文本样式化后不再抛错并由此确立了样式应用后选区切换为视觉选区、再次切换样式时视觉选区保留的预期行为。2.3 测试页面结构手动测试对应的页面文件是 native.html它初始化了一个包含 5 行 4 列表格的经典编辑器div ideditor1 pSome text/p table border1 trtdCell 1.1/tdtdCell 1.2/tdtdCell 1.3/tdtdCell 1.4/td/tr trtdCell 2.1/tdtdCell 2.2/tdtdCell 2.3/tdtdCell 2.4/td/tr trtdCell 3.1/tdtdCell 3.2/tdtdCell 3.3/tdtdCell 3.4/td/tr trtdCell 4.1/tdtdCell 4.2/tdtdCell 4.3/tdtdCell 4.4/td/tr trtdCell 5.1/tdtdCell 5.2/tdtdCell 5.3/tdtdCell 5.4/td/tr /table pSome text/p /div页面脚本中通过bender.tools.env.mobile与bender.tools.ignoreUnsupportedEnvironment( tableselection )过滤移动端等不支持 Table Selection 的环境并以autoGrow_onStartup: true配置初始化编辑器。也就是说手动测试虽由人执行但页面本身已经做好了环境兼容预处理。三、底层机制原生选区、视觉选区与样式命令如何协作要理解该测试为什么这样设计需要先厘清 Table Selection 插件中的两套选区模型。3.1 视觉选区fake selection的构建与清理Table Selection 插件通过 CSS 类在表格单元格上模拟多选区。核心实现位于 plugins/tableselection/plugin.jsfakeSelectCells( editor, cells )plugin.js为每个目标单元格创建从setStartBefore到setEndAfter的 Range然后通过editor.getSelection().selectRanges( ranges )一次性提交给编辑器从而形成跨单元格的伪多 Range选区clearFakeCellSelection( editor, reset )plugin.js移除单元格上的cke_marked类并清理表格的data-cke-tableselection-ignored属性同时在lockSnapshot/unlockSnapshot之间完成保证不会产生多余的撤销步骤fakeSelectionChangeHandlerplugin.js在selectionCheck事件中判断当前选区是否处于表格内且为 fake 选区再决定是否重建视觉选区。此外插件在 plugin.js 中通过addContentsCss注入 styles/tableselection.css用于渲染选中单元格的高亮外观。3.2 原生选区的让路策略在 plugin.js 的鼠标选择逻辑中有一段关键注释The selection is inside one cell, so we should allow native selection, but only in case if no other cell between mousedown and mouseup was selected.也就是说当用户只在单个单元格内部拖选文本时Table Selection 会刻意保留原生选区调用clearFakeCellSelection清理视觉选区以便用户能正常编辑单元格文本——这正是native.md第 2 步用原生选区选中第一个单元格文本能成立的前提。3.3 样式命令与选区的联动Basic Styles 插件在 plugins/basicstyles/plugin.js 中通过addButtonCommand注册Bold、Italic、Underline、Strike、Subscript、Superscript六个命令并绑定快捷键CtrlB / CtrlI / CtrlU。加粗命令默认基于config.coreStyles_boldplugin.jsCKEDITOR.config.coreStyles_bold { element: strong, overrides: b };样式命令执行时会依据当前选区无论原生还是 fake调用style.apply( editor )/style.remove( editor )。而 #941 的修复点正是在样式应用后将选区从原生形态切换为视觉选区且第二次 toggle 时保持视觉选区不丢失。四、自动化测试佐证从手动到可重复验证手动测试之外仓库同时提供了自动化回归测试可重复验证同一行为。4.1 集成测试切换toggle样式tests/plugins/tableselection/integrations/basicstyles/basicstyles.js 中直接标注了// (#941)其核心用例test toggle style完整复刻了手动测试的逻辑editor.getSelection().fake( cell ); selectElement( editor, cell ); editor.execCommand( bold ); assert.areEqual( strong, cell.getFirst().getName(), Cell should be bolded ); selectElement( editor, cell.findOne( strong ) ); editor.execCommand( bold ); assert.areEqual( CKEDITOR.NODE_TEXT, cell.getFirst().type, Cell should be unbolded );其中selectElement使用 Range 的setStartAt/setEndAt选中元素内部文本即模拟原生选区。第一次execCommand( bold )后断言单元格首个子节点是strong加粗生效第二次执行后断言恢复为文本节点取消加粗与手动测试的预期完全对应。4.2 核心样式测试跨单元格样式应用与选区保持tests/plugins/tableselection/integrations/core/style.js 则验证多单元格视觉选区场景通过tableSelectionHelpers.getRangesForCells( editor, [ 0, 1 ] )构造两个单元格的 Range 后调用style.apply( editor )与style.remove( editor )并断言应用与移除样式后selection.isFake仍为true、selection.isInTable()仍为true选区 Range 数量仍为 2即视觉选区在样式操作前后被完整保留。这正好对应 basicstyles.md 中样式应用到所有单元格、视觉选区保留的预期也从源码层面印证了 Table Selection 与样式系统集成的两个核心契约样式作用于全部选中单元格、选区形态不因样式操作而丢失。4.3 撤销undo场景中的选区恢复tests/plugins/tableselection/integrations/core/selection.js 还覆盖了execCommand( bold )后执行撤销的场景断言 undo 之后视觉选区同样被恢复restoreFakeSelection逻辑见 plugin.js进一步说明选区生命周期与样式命令、撤销栈的耦合是经过系统性测试的。五、如何运行与复现5.1 运行手动测试手动测试需要借助 Bender.js 环境。仓库根目录提供了 bender.js、bender.ci.js 与 bender-runner.config.json。典型流程为在仓库根目录执行bender server run启动测试服务器打开手动测试页面对应native.html并按native.md的步骤操作打开浏览器控制台观察是否有异常抛出。5.2 运行自动化测试自动化用例同样由 Bender 驱动例如tests/plugins/tableselection/integrations/basicstyles/basicstyles.js头部声明/* bender-tags: editor, tableselection */ /* bender-ckeditor-plugins: basicstyles,tabletools,toolbar,tableselection */这意味着它需要tableselection、basicstyles、tabletools、toolbar插件配合并通过bender.tools.ignoreUnsupportedEnvironment( tableselection )在移动端等不支持的浏览器环境中自动跳过与手动测试页的环境过滤策略保持一致。六、对开发者的实战启示回归测试的三要素值得借鉴native.md用最小插件组合wysiwygarea toolbar tableselection basicstyles、明确的预期/意外结果对照、以及先样式化、再 toggle的两步序列精准锁定了 #941 的故障面。写同类回归文档时应同样做到可复现、可判定、可追溯。选区模型的转换是集成设计的核心Table Selection 对单单元格内部原生选区刻意放行plugin.js而样式命令执行后需将选区收敛回视觉选区才能在二次操作时保持一致体验——这正是native.md期望结果中selection changes into visual selection的含义。手动与自动化测试互为镜像native.md的手动步骤与basicstyles.js的自动化断言一一对应加粗 →strong元素、取消加粗 → 文本节点、选区保留 →isFake/isInTable/Range 数量断言这种手自一体的测试设计能显著降低回归漏测风险。七、小结native.md是一份小而精的手动回归测试文档但其背后牵动着 Table Selection 的视觉选区机制、Basic Styles 的样式命令系统以及 #941 修复的完整链路。通过将它与 basicstyles.js、core/style.js、core/selection.js 及 plugin.js 对照阅读开发者既能掌握原生选区样式化这一具体场景的验证方法也能理解 CKEditor 4 表格多选与样式系统集成的设计边界——这在二次开发 Table Selection 或排查样式命令异常时具有直接参考价值。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 不可编辑图片点击保护bug 2129 回归测试与选区锁定原理剖析CKEditor 4 不可编辑图片点击保护bug 2129 回归测试与选区锁定原理剖析 在 CKEditor 4 的富文本编辑区中 contentedita前端UI组件CKEditor 4 三击选择与 Selection Optimization列表项格式应用的手动回归测试指南CKEditor 4 三击选择与 Selection Optimization列表项格式应用的手动回归测试指南 本篇技术指南围绕 tests/core/sel前端UI组件CKEditor 4 Table Selection 插件在 Firefox 中的右键回归测试解析bug 2003 的修复原理与验证方法CKEditor 4 Table Selection 插件在 Firefox 中的右键回归测试解析bug 2003 的修复原理与验证方法 导读 本文围绕 CK前端UI组件上一篇GHelper终极指南如何彻底优化你的华硕笔记本性能与续航下一篇GHelper技术解析华硕笔记本硬件控制的轻量化架构与深度调优创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
