前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载本文以 tests/plugins/dialogadvtab/manual/multiplelinks.md 这份手动测试用例文档为骨架深入讲解 CKEditor 4 中dialogadvtab插件如何为链接对话框Link dialog提供 Advanced 标签页以及围绕 issue #1046连续创建多个新链接时后一个链接的id属性丢失的完整回归测试流程。读完本文你将掌握该手动测试的操作步骤与判定标准理解 Advanced 标签页中id字段的底层实现机制并能通过仓库内的自动化测试与源码确认该 Bug 的根因与修复方式。测试用例文档概览一份 Bender 手动测试的完整要素multiplelinks.md是 CKEditor 4 测试体系中的一份**手动测试manual test**文档与同目录下的multiplelinks.html页面一一对应。文档头部以bender-*开头的元数据标签声明了测试的运行环境与归属信息元数据标签值含义bender-tags4.10.1, 1046, bug该测试归属于 4.10.1 版本周期关联 issue #1046属于 Bug 回归测试bender-uicollapsed手动测试页面默认以折叠 UI 呈现聚焦编辑器本体bender-ckeditor-pluginswysiwygarea, toolbar, link, dialogadvtab, sourcearea测试页面加载的插件集合经典编辑区、工具栏、链接插件、Advanced 标签插件以及源码视图对应的测试页面 multiplelinks.html 内容极简一个contenteditabletrue的div#editor内部包含pfoo, bar/p两段文本随后通过CKEDITOR.replace( editor )将编辑器初始化到该容器上。测试的全部交互都发生在这一小段正文之上。手动复现步骤完整操作流程文档给出了 8 步操作目的是连续创建两个带id属性的链接选中文本 foo。点击工具栏的 Link链接按钮打开链接对话框。将 URL 设置为 aa。切换到 Advanced高级标签页。将 Id 字段设置为 aa。点击 OK 确认完成第一个链接。重复步骤 1–6这次选中 bar并将 Id 字段设置为 bb。点击工具栏的 Source源代码按钮切换到源码视图检查生成的 HTML。这套步骤本质上是在同一个编辑器实例中先后为两个不同的文本片段创建链接且每次都通过 Advanced 标签页写入自定义的id值。步骤 8 切换到源码视图是为了直观地核对两个a元素的最终属性。Expected 与 Unexpected测试的判定标准文档给出了明确的判定标准Expected预期两个链接都带有正确的id值即最终 HTML 应类似a href... idaafoo/a与a href... idbbbar/a。Unexpected意外第二个链接没有获得id属性即 Bug 复现成功。这一对预期/意外结果的设定精确指向了 issue #1046 描述的现象后续新建的链接不会包含id属性。在修复前执行上述步骤会出现 Unexpected 分支描述的结果——第一个链接正常携带idaa而第二个链接丢失id属性。Bug 根因分析Advanced 标签字段的复用机制要理解为什么第二个链接会丢失id需要回到 plugins/dialogadvtab/plugin.js 的字段实现。Advanced 标签页中的每个字段都通过setupAdvParams与commitAdvParams两个回调与编辑区中的真实元素同步function setupAdvParams( element ) { var attrName this.att; var value element element.hasAttribute( attrName ) element.getAttribute( attrName ) || ; if ( value ! undefined ) this.setValue( value ); } function commitAdvParams() { // Dialogs may use different parameters in the commit list, so, by // definition, we take the first CKEDITOR.dom.element available. var element; for ( var i 0; i arguments.length; i ) { if ( arguments[ i ] instanceof CKEDITOR.dom.element ) { element arguments[ i ]; break; } } if ( element ) { var attrName this.att, value this.getValue(); if ( value ) element.setAttribute( attrName, value ); else element.removeAttribute( attrName, value ); } }字段定义中的att属性如id决定了字段读写的是哪个 HTML 属性setup在对话框打开时把元素的现有属性值回填到输入框commit在点击 OK 时把输入框的值写回元素。dialogadvtab 插件的createAdvancedTab中advId字段正是这样构建的见 plugins/dialogadvtab/plugin.js 中tabConfig.id分支。而 plugins/link/dialogs/link.js 是链接对话框的真正实现它自身也定义了advId字段requiredContent: a[id]并通过setupAdvParams/commitAdvParams将值归入data.advanced对象再在提交阶段由 plugins/link/plugin.js 中的advAttrNames映射id: advId批量写回a元素。从源码结构看#1046 的根因在于当连续新建第二个链接时Advanced 标签页中advId等字段的初始化/提交链路存在状态残留或目标元素判定偏差导致第二次提交时id未能正确写回到新创建的a元素上从而出现第二个链接没有id属性的现象。修复验证变更记录与自动化回归测试issue #1046 的修复被记录在 CHANGES.md 的 Fixed Issues 列表中Fixed: Subsequent new links do not include theidattribute.该修复随 4.11.0对应bender-tags: 4.10.1所标记的回归周期发布。与手动测试配套的自动化回归测试位于 tests/plugins/dialogadvtab/dialog.js其中两个用例直接验证了本文讨论的场景test adding two subsequent id changes先选中p[aaa] strongbbb/strong/p中的 aaa打开 link 对话框设置 URL 为a、Advanced 标签的advId为aa并确认断言输出a hrefhttp://a idaaaaa/a随后选中strongbbb/strong再次打开对话框设置 URL 为b、advId为bb并确认断言输出a hrefhttp://b idbbstrongbbb/strong/a——第二个链接的idbb正是修复后的正确行为。test editing two subsequent id changes对已有两个链接的 HTML 分别补充id属性验证编辑路径下同样不会丢失属性。这两个用例与手动测试multiplelinks.md形成自动化 人工双重回归防线手动测试负责在真实浏览器交互中确认体验正确自动化测试负责在每次 CI 中锁定输出结果。dialogadvtab 插件原理Advanced 标签页的可配置化设计multiplelinks.md依赖的dialogadvtab插件plugins/dialogadvtab/plugin.js是一个标签页工厂通过createAdvancedTab( editor, tabConfig, element )为其他对话框按需生成 Advanced 标签页。核心设计包括可配置字段开关defaultTabConfig { id: 1, dir: 1, classes: 1, styles: 1 }决定默认启用id、dir文字方向、classCSS 类与style内联样式四类字段调用方可通过tabConfig裁剪例如 plugins/table/dialogs/table.js 中调用dialogadvtab.createAdvancedTab( editor, null, table )传null即使用默认配置而 plugins/iframe/dialogs/iframe.js 中只启用{ id: 1, classes: 1, styles: 1 }不启用dir。内容过滤规则allowedContent根据tabConfig动态生成允许内容规则——id/dir产生[id,dir]属性规则、classes产生(*)类规则、styles产生{*}样式规则保证用户通过 Advanced 标签页写入的属性不被编辑器的内容过滤器剥离。字段类型多样advId是text输入框advLangDir是select下拉框notSet/ltr/rtl三项advStyles是带getStyle/updateStyle辅助方法的样式文本域并配有CKEDITOR.dialog.validate.inlineStyle校验advCSSClasses是 CSS 类名文本域。dialog.js中另外两个用例test getStyle、test dialog field updateStyle分别对应 issue #9553 与 #9281验证了advStyles字段解析与更新内联样式的行为可作为理解该字段的补充阅读。如何运行这份手动测试该手动测试由 Bender 测试框架驱动测试分组配置见 bender.jstests.Plugins分组覆盖tests/plugins/**手动测试通过manualBrowsers参与人工验证。若要在本地复现可将编辑器加载到测试页面所声明的插件集合wysiwygarea, toolbar, link, dialogadvtab, sourcearea中初始化包含pfoo, bar/p的编辑区然后严格按上文 8 步操作执行最后通过 Source 视图检查两个链接的id属性是否符合 Expected 分支。仓库为只读运行与配置方式仅用于本地验证无需修改任何仓库文件。小结multiplelinks.md虽然只是一份简短的手动测试文档但它完整承载了一个真实 Bug#1046的复现路径与验收标准。结合 plugins/dialogadvtab/plugin.js、plugins/link/dialogs/link.js、tests/plugins/dialogadvtab/dialog.js 与 CHANGES.md 中的修复记录可以清晰地看到 CKEditor 4 从问题发现 → 手动复现 → 根因定位 → 修复 → 自动化回归的完整工程闭环以及dialogadvtab插件作为可复用 Advanced 标签页工厂的底层设计。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 粘贴全角空格U3000丢失问题修复与回归测试解析CKEditor 4 粘贴全角空格U3000丢失问题修复与回归测试解析 本文以 CKEditor 4 仓库中的手动测试用例 tests/plugins/c前端UI组件CKEditor 4 Auto Link 插件源码模式兼容性修复解析2756 缺陷、根因与 Bender 回归测试CKEditor 4 Auto Link 插件源码模式兼容性修复解析 2756 缺陷、根因与 Bender 回归测试 Auto Link 是 CKEditor前端UI组件CKEditor 4 Auto Grow 插件宽度稳定性深度解析Bug 4286 手动回归测试与源码修复原理CKEditor 4 Auto Grow 插件宽度稳定性深度解析Bug 4286 手动回归测试与源码修复原理 Auto Grow自动增高是 CKEdito前端UI组件上一篇从文件级审计到可辩护的合规声明vscode-gitlens 的 WCAG Compliance Rollup 方法论与实践下一篇embassy-usb-logger 使用指南在 Embassy 应用中通过 USB 串口输出 log 日志创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考