前端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/floatpanel/manual/rendering.md 展开逐项拆解其测试目标回归 ticket #13756Edge 浏览器中上下文菜单被裁剪、复现步骤以及其背后floatpanel插件“智能适配视口”的定位渲染原理。读完本文你将掌握如何运行和编写此类 Bender 手动回归测试并能从源码层面理解浮动面板上下文菜单、下拉面板等为何以及如何被重新定位、如何按视口剩余空间翻转与对齐。测试用例定位与背景该手动测试位于 tests/plugins/floatpanel/manual/rendering.md配套的页面骨架是同一目录下的 rendering.html。文件头部的 Bender 指令给出了它的全部元信息bender-tags: bug, 4.5.8, trac13756 bender-ui: collapsed bender-ckeditor-plugins: wysiwygarea,toolbar,elementspath,list,liststyle,basicstyles,contextmenu逐项解读bender-tags: bug, 4.5.8, trac13756这是一条bug 回归测试与 CKEditor 4.5.8 版本相关追踪的是 Trac 工单#13756。对应的修复记录可以在仓库根目录 CHANGES.md 的 4.5.8 “Fixed Issues” 一节找到#13756[Edge] Fixed: Context menus are cut-off.Edge 浏览器中上下文菜单被裁剪bender-ui: collapsed手动测试以折叠 UI 呈现页面会自动折叠到便于观察的最小形态。bender-ckeditor-plugins测试页面只加载与场景强相关的插件集合——wysiwygarea编辑区、toolbar工具栏、elementspath元素路径条、list与liststyle列表及其样式、basicstyles基本样式、contextmenu上下文菜单。其中contextmenu插件声明requires: menu见 plugins/contextmenu/plugin.js而menu又依赖floatpanel因此这个精简的插件集合恰好覆盖了“在列表项上弹出上下文菜单”这一完整调用链。渲染页面 rendering.html 的正文非常简单一个包含foo/bar/baz三个列表项的textarea随后执行CKEDITOR.replace( editor1 )将其初始化为经典classic编辑器列表内容作为初始 HTML 出现在编辑区中。复现步骤与预期结果测试文档给出的操作只有一步Open context menu inside any of list items (e.g. with a right mouse click). 在任意列表项内部打开上下文菜单例如通过鼠标右键。Expected预期面板布局正确The panel layout is correct。Unexpected非预期面板被裁剪Panel is cropped。这里的“面板”即floatpanel渲染出的浮动面板。之所以选择列表项作为触发点是因为 #13756 的裁剪问题与列表项菜单的尺寸、层级level以及 Edge 浏览器对 iframe 与绝对定位元素的处理方式密切相关——菜单弹出位置靠近编辑区边缘时如果面板只按初始坐标摆放而不考虑视口剩余空间就会出现右侧或底部被裁掉的现象。这条用例的价值在于它是一条完全人工判定的视觉回归测试自动化断言难以覆盖“是否被裁剪”这类渲染细节因此以 Bender 手动测试的形式固化确保任何改动都不会让 #13756 的修复回退。底层原理floatpanel 的渲染与视口智能定位要理解“面板被裁剪”为什么会发生、又是如何被修复的需要进入浮动面板的源码实现。floatpanel插件本体在 plugins/floatpanel/plugin.js 中依赖panel插件plugins/panel/plugin.js。面板实例的生成与缓存getPanel 函数 以docId-eleId-skinName-langDir[-uiColor][-CSSs][-level]为键生成面板唯一标识同键面板在全局panels对象中复用。面板 HTML 由CKEDITOR.ui.panel#render生成其模板结构为plugins/panel/plugin.jsdiv.cke_panel └── iframe.cke_panel_frame └── html.cke_panel_container └── body └── div.cke_panel_block关键点在于 CKEDITOR.ui.floatPanel 构造函数 中强制definition.forceIFrame 1浮动面板始终以 iframe 承载内容。这样一来面板内容与主文档隔离样式互不污染也让baseFloatZIndex的层级控制成为可能——面板外层 div 的z-index取editor.config.baseFloatZIndex 1plugins/panel/plugin.js而baseFloatZIndex的默认值为10000可在 core/config.js 中调整。showBlock定位的核心流程打开面板的核心方法是 showBlock。其定位算法大致分三步计算初始坐标以offsetParent的文档坐标为基础减去“定位祖先”positioned ancestor的坐标再叠加offsetX/offsetY与corner校正。隐藏面板、按内容自适应尺寸先setOpacity( 0 )让面板不可见但可测量随后清除旧宽度若block.autoSize为真则按内容scrollWidth/scrollHeight设置面板宽高并处理 IE quirks 盒模型误差与额外 10px 的视觉余量。智能适配视口smartly fit the viewport size利用getBoundingClientRect()与视口尺寸panelWindow.getViewPaneSize()比较面板四周的剩余空间决定是否翻转或贴边对齐。其中第三步正是“面板被裁剪”问题的直接对策源码注释也明确写着/* panel layout smartly fit the viewport size. */plugins/floatpanel/plugin.js。其横向分支逻辑为默认方向下若面板右侧空间不足spaceAfter rectWidth若左侧空间足够则向左翻转整个面板left - rectWidth否则若视口比面板宽则右对齐到窗口边缘left left - rect.right viewportSize.width否则贴左对齐保证“绝不从左侧裁掉面板”。纵向同理底部空间不足时优先向上翻转其次贴底对齐、再其次贴顶对齐保证“绝不从顶部裁掉面板”。这套算法同时考虑了 RTL从右到左方向下的镜像逻辑以及 IE 在 RTL 绝对定位下的滚动条修正plugins/floatpanel/plugin.js。也就是说“面板布局正确”并不只是恰好放在鼠标位置而是保证面板整体落在视口内——这正是回归用例 Expected 一栏背后真正被验证的机制。corner 参数语义showBlock的corner参数决定面板锚定在offsetParent的哪个角LTR 与 RTL 下语义互为镜像plugins/floatpanel/plugin.jscornerLTR 编辑器RTL 编辑器1左上角右上角2右上角左上角3右下角左下角4左下角右下角上下文菜单在 menu 插件的 show 方法 中默认取corner editor.lang.dir rtl ? 2 : 1并创建block.autoSize true的自动尺寸面板子菜单则通过showAsChild作为父面板的 child 显示plugins/menu/plugin.js。contextmenu插件在此基础上提供了面板定义className: cke_menu_panel与aria-label并允许通过config.contextmenu_contentsCss追加自定义 CSSplugins/contextmenu/plugin.js。生命周期与 resize 行为面板并非常驻可见其显隐由一系列事件驱动编辑器mode切换或resize时自动隐藏plugins/floatpanel/plugin.js窗口resize时调用 reposition4.5.4 起新增对应 #11724用上次showBlock的参数重新隐藏并展示从而在视口变化后保持面板位置正确所有编辑器实例销毁时若为最后一个实例则销毁全部面板否则仅隐藏plugins/floatpanel/plugin.js。回归历史的印证CHANGES.md 中与该浮动面板渲染相关的修复不止 #13756 一处可作为理解演进脉络的索引4.5.8#13756[Edge] 上下文菜单被裁剪——即本手动测试守护的修复4.5.4#11724引入了reposition窗口尺寸变化时面板应重新定位而不是在 Android/iOS 上被意外隐藏源码注释与reposition的since 4.5.4标记互相印证plugins/floatpanel/plugin.js。此外同一目录下的另一条手动测试 tests/plugins/floatpanel/manual/resize.md 专门验证 resize 场景移动设备上软键盘弹出/收起、桌面端缩放浏览器窗口时段落格式下拉应隐藏或重新定位——它守护的正是 #11724 的修复与rendering.md形成“定位正确性”与“resize 响应性”两个互补维度。配套单元测试把渲染行为固化为断言除手动测试外floatpanel 还有对应的自动化单元测试 tests/plugins/floatpanel/floatpanel.js其中若干用例与本文主题直接相关test block panel openinghiding通过panel.showBlock( testBlock1, editor.editable(), 1 )在编辑区左上角打开面板断言panel.visible与panel.element.isVisible()的状态切换test panel hide on mode switch/test panel hide on editor resize验证编辑器切模式setMode( source )与editor.resize()都会触发面板隐藏test panel reposition on window resize用sinon.spy断言窗口 resize 事件触发后reposition被调用一次、showBlock被以相同参数调用第二次test second panel hide on resize验证 #9800 场景——打开第二个面板后编辑器被 resize第二个面板也应被关闭。这些单元测试从“状态与事件”层面约束面板行为而rendering.md这类手动测试则从“视觉呈现”层面兜底两者互补。如何运行与扩展此类测试Bender 手动测试的入口约定是“同名.html.md”成对出现.html提供可运行页面.md提供步骤与预期。运行时参照仓库根目录 bender.js 中的配置其中manualBrowsers、manualTestTimeout等参数定义了接受手动测试的浏览器与超时安装benderjs依赖见 package.json 的devDependencies启动 Bender 服务并进入 manual 测试列表选择floatpanel/manual/rendering按文档步骤在列表项上右键打开上下文菜单观察面板是否完整落入视口、有无被裁剪据此勾选通过或失败。若要在后续改动中扩展覆盖可以在同一目录下新增.html/.md对并沿用bender-tags标记关联 ticket 与版本与bender-ckeditor-plugins裁剪到最小必要插件集的约定让每一条回归都有明确的触发场景与预期。小结从一条看似只有四五行的手动测试用例出发可以完整还原 CKEditor 4 浮动面板的渲染链路contextmenu依赖menu→CKEDITOR.ui.floatPanel强制 iframe→showBlock的“测量 → 自适应尺寸 → 视口智能适配”三步定位法。rendering.md所守护的 #13756Edge 下上下文菜单被裁剪正是视口适配逻辑失效的典型案例而 4.5.8 的修复与 4.5.4 的reposition机制共同保证了无论面板在列表项、段落还是任意元素上弹出无论视口如何变化面板都能完整、正确地呈现在用户视线之内。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 Mentions 面板视口内智能定位手动测试用例、源码原理与回归验证CKEditor 4 Mentions 面板视口内智能定位手动测试用例、源码原理与回归验证 CKEditor 4 的 Mentions提及插件让用户通过输前端UI组件CKEditor 4 列表删除回归测试深度解析Bender 手动测试 removelistatoffset 与 5068 修复原理CKEditor 4 列表删除回归测试深度解析Bender 手动测试 removelistatoffset 与 5068 修复原理 导读 本文围绕 CKEdi前端UI组件PR Agent /generate_labels 工具完全指南基于 AI 的 PR 自定义标签自动生成与配置实战PR Agent /generate_labels 工具完全指南基于 AI 的 PR 自定义标签自动生成与配置实战 导读 /generate_labels 是前端UI组件上一篇GitHub中文界面解决方案5分钟消除语言障碍的终极指南下一篇GitHub汉化插件3分钟让英文GitHub变成中文界面新手必备神器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考