前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载导读本文围绕 CKEditor 4 仓库中的手动测试用例 removelistswithmagicline.md 展开深入剖析一个真实存在的编辑器缺陷Issue #5068当用户全选跨越两个无序列表的内容并将鼠标移动到最后一个列表项下方触发 Magic Line红色虚线辅助线后再按下Delete或Backspace编辑器控制台会抛出Cannot read properties of null (reading getParents)异常。读完本文你将掌握该 Bug 的完整复现路径、底层删除流程的调用链从editable按键处理器到range.deleteContents以及项目如何用自动化测试锁定该回归。一、测试用例背景Bender 手动测试与 Magic Line 插件CKEditor 4 使用 Bender.js 作为测试框架测试分为自动化测试位于tests/目录下各.js文件与手动测试每个手动用例由同名.html与.md文件组成。本文的主角tests/core/editable/manual/removelistswithmagicline.md就是一类手动测试描述文件其开头的元数据声明了测试归属bender-tags: 4.17.2, bug, 5068 bender-ui: collapsed bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, list, resize, undo, sourcearea, elementspath, magiclinebender-tags指明该用例针对4.17.2版本引入、属于bug回归测试、关联 Issue#5068bender-ui: collapsed手动测试 UI 默认折叠仅展示测试说明bender-ckeditor-plugins列出测试编辑器实例需要加载的插件清单其中magicline是本用例的关键依赖它负责在块级元素边缘渲染一条可点击的魔法线帮助用户把光标移动到原本难以到达的空白区域详见 plugins/magicline/plugin.js。Magic Line 的默认触发器是一组块级元素源码中可见其默认集合triggers: config.magicline_everywhere ? DTD_BLOCK : { table: 1, hr: 1, div: 1, ul: 1, ol: 1, dl: 1, form: 1, blockquote: 1 }也就是说ul/ol/dl列表元素天然是 Magic Line 的触发对象——这正是本用例把删除列表与Magic Line组合在一起的原因。二、复现步骤与测试页面结构手动测试的描述.md与页面.html一一对应页面 fixture 位于 removelistswithmagicline.html其初始内容如下textarea nameeditor pbegin/p ul lit12[3456/li lit2/li lit3/li /ul pmiddle/p ul lit21/li lit22]/li /ul /textarea script CKEDITOR.replace( editor, { height: 250 } ); /script注意[与]是 Bender 测试体系中的选区标记selection marker实际渲染时不会出现仅用于标注测试者需要选中的范围。这里的选择起点位于第一个ul的第一个li内部t12之后终点位于第二个ul的第二个li内部t22之后选择跨过了两个独立列表以及中间的pmiddle/p段落。复现步骤对应.md文件为打开浏览器控制台Console准备观察报错全选[]内包含的所有内容含标记本身将鼠标光标移动到最后一个列表项即第二个ul的lit22]/li下方触发 Magic Line——此时最后一个列表项下方应可见一条红色虚线按下Delete或Backspace。预期行为与意外行为场景表现预期Expected选区内的内容被正确删除编辑器正常收敛为一个空文档或保留必要占位内容意外Unexpected控制台抛出异常Cannot read properties of null (reading getParents)该异常信息的字面含义是某段代码试图在null节点上调用getParents()。结合源码这正是 core/dom/range.js 中范围内容删除算法execContentsAction在求取选区边界节点祖先链时startNode.getParents()对空引用的访问——说明在Magic Line 已激活 多列表全选 删除键的组合下范围边界节点被意外清空或替换为null。三、底层原理删除键处理链路与多列表分支要理解这个 Bug需要先厘清编辑器对Delete/Backspace的拦截逻辑。该逻辑位于 core/editable.js 的key事件监听器中约 L1016 起当按键码命中{ 8: 1, 46: 1 }Backspace / Delete时编辑器先判断当前选区是否完整覆盖了列表或表格// Backspace OR Delete. if ( keyCode in backspaceOrDelete ) { var selected, range sel.getRanges()[ 0 ], path range.startPath(), /* ... */ isMultipleListSelection false; // [IE11] ... } else if ( isListOrTableInSelection( sel ) ) { // Check whether selection starts at the beginnig of the list and ends at the other list (#4875). // Lists needs to be extracted later on after saving snapshot image, otherwise some UI artifacts like // magicline may affect list range (#5068). isMultipleListSelection areMultipleListsInRange( range ); if ( !isMultipleListSelection ) { selected getSelectedTableList( sel ); } } if ( selected || isMultipleListSelection ) { editor.fire( saveSnapshot ); if ( isMultipleListSelection ) { selected getRangeForSelectedLists( range ); selected.deleteContents(); } else { range.moveToPosition( selected, CKEDITOR.POSITION_BEFORE_START ); selected.remove(); } /* ... */ } }这段代码包含两个关键点areMultipleListsInRange( range )#4875 引入当选区覆盖多个列表时走独立分支。其实现core/editable.js L1659 起先调用startsAtFirstListItem( range )确认选区是否从某个列表项的开头开始再用CKEDITOR.dom.walker沿范围遍历元素若途中遇到ul/ol/dl等列表标签或起止块级父节点的子元素数量不一致嵌套列表的边界情形即判定为多列表选择。getRangeForSelectedLists( range )L1712 起对多列表选择把范围起点回拨到列表容器起点并放大到元素级再调用selected.deleteContents()一次性删除整段列表内容function getRangeForSelectedLists( range ) { var list range.startContainer.getAscendant( listTypes, true ); if ( !list ) { return null; } range.setStart( list, 0 ); range.enlarge( CKEDITOR.ENLARGE_ELEMENT ); return range; }源码注释L1051–L1053明确写道Lists needs to be extracted later on after saving snapshot image, otherwise some UI artifacts like magicline may affect list range (#5068)——即列表的删除必须放在saveSnapshot撤销快照之后执行否则Magic Line 这类 UI 构件会干扰列表范围的计算。这正是本测试用例要锁定的隐患当 Magic Line 的浮层/辅助 DOM 结构出现在列表边缘时范围的startContainer可能被解析到 Magic Line 引入的临时节点上进而在删除算法中触发空引用。崩溃点的进一步定位deleteContents()最终会调用 core/dom/range.js 中的execContentsAction。该函数是删除/提取/克隆范围内容的统一算法其核心步骤之一就是求取选区边界节点的祖先链// Get the parent nodes tree for the start and end boundaries. var startParents startNode.getParents(), endParents endNode.getParents(),而getParents()定义于 core/dom/node.js L568它会从当前节点一路向上遍历到文档根。若startNode为null例如 Magic Line 的临时节点在optimizeBookmark()阶段被清理导致边界引用悬空则会直接抛出Cannot read properties of null (reading getParents)——与手动测试用例记录的报错信息完全一致。四、自动化回归测试如何锁死 #5068除了手动测试仓库还为该 Bug 准备了自动化回归用例 tests/core/editable/removemultiplelist.js。该文件用bender.tools.testInputOut配合模板 期望输出的机制批量验证多种列表删除场景其中与 #5068 直接对应的用例是L43–45// (#5068) test fully selected lists without part of first list item are removed with the delete key: performInputOutputTest( without_first_item, DELETE_KEY, CKEDITOR.env.ie || CKEDITOR.env.gecko ), test fully selected lists without part of first list item are removed with the backspace key: performInputOutputTest( without_first_item, BACKSPACE_KEY, CKEDITOR.env.ie || CKEDITOR.env.gecko )用例名 fully selected listswithout part of first list item 与手动测试页面中选择从第一个li的中间t12之后开始的形态一致——即首个列表项只是部分被选中。测试通过以下方式驱动L51–69bender.tools.setHtmlWithSelection( editor, source ); editor.editable().fire( keydown, new CKEDITOR.dom.event( { keyCode: keyCode } ) );即先在编辑器中注入带[/]标记的 HTML 与选区再以编程方式派发keydown事件DELETE_KEY 8、BACKSPACE_KEY 46最后用bender.assert.beautified.html比对删除后的输出是否符合预期。该测试同时覆盖了classiciframe与inlinecontenteditable两种编辑器形态L6–11并在CKEDITOR.env.ie或CKEDITOR.env.gecko环境下对个别模板标记为忽略assert.ignore()说明该缺陷的触发还带有明显的浏览器差异属性。值得一提的是同一个测试文件也覆盖了 #4875multiple_full_list、mixed_full_lists、nested_full_lists等模板证明多列表全选删除与Magic Line 干扰是同一删除分支上先后被发现、并被连续修复的两个关联问题。五、周边关联用例与排查建议tests/core/editable/manual/目录下还沉淀了一组高度同源的用例可作为排查列表删除类缺陷的对照样本removelistatoffset.md同样标注 #5068但不触发 Magic Line其意外行为是两个列表被全部删除预期仅删除选区内容removemultiplelistswithmagicline.md#4875多列表 Magic Line步骤与本用例几乎一致removemultiplelists.md#4875多列表、无 Magic Line意外行为是选区被部分删除。对比可见是否激活 Magic Line决定了故障形态——无 Magic Line 时多表现为删多了/删少了范围计算不完整有 Magic Line 时则表现为空引用崩溃范围边界被 UI 临时节点污染。这为复现类似问题提供了可复用的排查思路优先复现仅键盘 选区的最小场景确认问题是否与 Magic Line 浮层相关观察range.startContainer/range.endContainer在deleteContents前后是否被null化重点检查optimizeBookmark()与 Magic Line 临时 DOM 的清理时机用 removemultiplelist.js 中的testInputOut模板体系把边界场景固化为回归用例覆盖classic与inline两种模式。六、附Magic Line 相关配置速查若要在实际项目中复现或规避本用例所描述的行为可参考 plugins/magicline/plugin.js 文件末尾的配置文档L1773 起配置项默认值说明magicline_triggerOffset30鼠标指针与元素边缘相距多少像素时触发 Magic Line像素值无单位magicline_holdDistance0.5Magic Line 保持显示的距离相对magicline_triggerOffset的比例magicline_color#FF0000Magic Line 的颜色默认红色即本用例中红色虚线的来源magicline_keystrokePrevious/magicline_keystrokeNextCTRLSHIFT3/CTRLSHIFT4通过键盘访问光标前/后不可达空白区域的快捷键magicline_tabuList[ data-widget-wrapper ]附加的禁触属性列表带这些属性的元素内禁用 Magic Linemagicline_everywherefalse是否在任意块级元素上启用 Magic Line默认仅表格、div、列表等相关配置在插件初始化时被读取并参与that对象构建L20–35例如holdDistance: 0 | triggerOffset * ( config.magicline_holdDistance || 0.5 )因此调整triggerOffset会连带影响 hold 距离的计算。结语removelistswithmagicline.md虽然只是一个十几行的手动测试描述但它完整记录了一个真实缺陷#5068的可复现路径、预期与意外行为。通过将其与 core/editable.js 的删除键处理分支、core/dom/range.js 的getParents崩溃点以及 removemultiplelist.js 的自动化回归用例相互印证可以看到 CKEditor 4 在选区删除这一基础能力上如何应对Magic Line 浮层污染范围边界这类隐蔽的 DOM 状态问题——这对于任何需要深度定制或二次开发 CKEditor 4 的团队而言都是一份难得的故障排查范本。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 列表删除回归测试深度解析Bender 手动测试 removelistatoffset 与 5068 修复原理CKEditor 4 列表删除回归测试深度解析Bender 手动测试 removelistatoffset 与 5068 修复原理 导读 本文围绕 CKEdi前端UI组件Astropy 修复 formatecsv 无列空表读取InconsistentTableError 的根因、修复实现与回归验证Astropy 修复 formatecsv 无列空表读取 InconsistentTableError 的根因、修复实现与回归验证 本指南基于 Astr科学计算科研数据分析CKEditor 4 连续空格删除与 nbsp; 转换 Bug 修复解析从手动测试用例到源码实现CKEditor 4 连续空格删除与 nbsp; 转换 Bug 修复解析从手动测试用例到源码实现 导读 本文围绕 CKEditor 4 中一个与删除键De前端UI组件上一篇Ouroboros Pi Runtime 集成指南把 Pi CLI 变成可选择的 Agent 执行运行时下一篇CTF 密码学实战Hash 函数攻击方法全解析暴力破解、长度扩展与算法缺陷利用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考