前端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/copyformatting/manual/tables.md 展开系统讲解 Copy Formatting格式刷插件在表格table这一特殊上下文中的行为验证方法并结合 plugins/copyformatting/plugin.js 源码、tests/plugins/copyformatting/下的自动化测试以及 styles/copyformatting.css 样式文件深入剖析单元格样式隔离、表头样式、混合选区、表格结构不被破坏背后的实现原理。读完本文你将能够独立运行这套手动测试理解表格上下文样式复制/粘贴的底层机制并学会通过copyFormatting_allowedContexts、copyFormatting_allowRules等配置精确控制插件行为。一、测试用例定位tables.md 在仓库中的角色tables.md是 Bender 测试框架下的一个**手动测试manual test**用例与同目录的tables.html配套使用。其文件头部的元数据声明了运行环境bender-ui: collapsed bender-tags: bug, copyformatting, 4.6.0 bender-ckeditor-plugins: copyformatting, toolbar, wysiwygarea, floatingspace, elementspath, table, tabletools, undobender-ui: collapsed手动测试页面以折叠的 UI 方式呈现便于测试人员专注操作bender-tags: bug, copyformatting, 4.6.0该用例自 Copy Formatting 功能引入的版本4.6.0起即被用于回归验证bender-ckeditor-plugins声明了测试页面需要加载的插件集合其中copyformatting、table、tabletools是表格场景的核心依赖wysiwygarea、floatingspace、elementspath、toolbar负责编辑器框架与界面undo用于验证撤销/重做集成。整个tests/plugins/copyformatting/manual/目录还包含lists.md、keystroke.md、sticky.md、allowedcontexts.md、links.md、undointegration.md等二十余个用例分别覆盖列表、快捷键、粘性模式、上下文限制、链接、撤销集成等维度tables.md专门聚焦表格这一最容易出问题的结构。二、测试准备理解配套的 tables.html 页面手动测试的操作台是 tests/plugins/copyformatting/manual/tables.html。页面创建了两个编辑器实例script CKEDITOR.replace( editor1, { allowedContent: true, extraPlugins: sourcearea } ); CKEDITOR.inline( editor2, { allowedContent: true, extraPlugins: dialog,sourcedialog } ); /scripteditor1是经典classic编辑器CKEDITOR.replace基于wysiwygareaiframeeditor2是行内inline编辑器CKEDITOR.inline。两个编辑器配置了allowedContent: true关闭 ACF 内容过滤限制确保测试时样式不会被过滤器拦截。页面内的表格内容经过精心构造覆盖了大量样式组合是验证插件行为的富样式样本带表头的复杂表格包含thead与th scopecol表头单元格内嵌多层span组合了字体族Comic Sans MS、字号20px、斜体、加粗、下划线、文字颜色#DAA520与背景色#00FF00用于验证表头样式是否被正确复制/隔离富样式数据单元格包含水平对齐center、垂直对齐top、word wrapnowrap、背景色orange、边框色plum等用于验证单元格级 CSS 属性是否只作用到单元格文字级样式样本背景色 文字颜色 字体Times New Roman 字号26px嵌套组合用于验证文本内联样式与单元格样式是否被区分对待表格级属性aligncenter、border5、width90%、border-collapse: collapse、dirltr以及另一张table-layout: fixed; width: 500px的固定宽度表格用于验证表格结构属性是否被误改。三、核心操作步骤继承原文档 Procedure原文档给出的操作步骤非常简洁但作为手动测试其玩转Play with tables背后隐含着一套标准操作流。结合copyformatting插件的交互模型工具栏按钮 鼠标点击 快捷键完整步骤如下在editor1经典编辑器中将光标放入任意带样式的文本/单元格点击工具栏中的Copy Formatting按钮或按Ctrl Shift C复制格式此时按钮进入按下On状态光标变为插件专用光标移动光标到目标位置可以是另一个单元格、表头、表格外的段落点击鼠标左键应用格式也可以先框选一段文本再应用如需连续粘贴双击Copy Formatting 按钮进入 sticky粘性模式可反复点击多处再次点击按钮或按Esc退出在editor2行内编辑器中重复以上操作验证两种编辑器形态下行为一致结合elementspath元素路径面板观察当前光标所处的 DOM 层级便于判断样式实际作用到了哪个元素。四、Things to check四个检查点逐条解读原文档列出的四个检查点正是表格场景最容易出 Bug 的四个维度每一条背后都有明确的源码逻辑支撑。检查点 1混合上下文选区跨段落与表格下样式正确应用Styles are applied correctly even in the mixed context (e.g. selection begins in a paragraph and ends in a table).当选区起点在普通段落、终点落在表格内部时插件需要把样式同时应用到两处。插件先通过_determineContext( range )判断选区所属上下文见 plugin.js_determineContext: function( range ) { function detect( query ) { /* 用 walker 遍历 range 内节点检测祖先 */ } if ( detect( { ul: 1, ol: 1 } ) ) { return list; } else if ( detect( table ) ) { return table; } else { return text; } }随后在applyFormatting事件监听器中按上下文分发plugin.jseditor.copyFormatting.on( applyFormatting, function( evt ) { var context plugin._determineContext( evt.data.range ); if ( context list editor.copyFormatting._isContextAllowed( list ) ) { plugin._applyStylesToListContext( evt.editor, evt.data.range, evt.data.styles ); } else if ( context table editor.copyFormatting._isContextAllowed( table ) ) { plugin._applyStylesToTableContext( evt.editor, evt.data.range, evt.data.styles ); } else if ( editor.copyFormatting._isContextAllowed( text ) ) { plugin._applyStylesToTextContext( evt.editor, evt.data.range, evt.data.styles ); } }, null, null, 999 );注意该监听器的优先级为 999晚于默认优先级10的先清除旧样式监听器执行。_applyStylesToTableContext内部对不属于表格专属元素的样式如b、span会回退调用_applyStylesToTextContext从而保证混合选区中段落部分也能获得样式。自动化测试 tests/plugins/copyformatting/applyformat.js 的test applyFormat on mixed context with table styles用例使用选区pApply for{mat/ptabletrtdMaybe h}ere/td/tr/table精确验证了这一行为断言表格单元格td内应用了 4 个样式、段落p内应用了 1 个样式且td上text-decoration: underline生效。检查点 2单元格与表头样式只作用于单元格/表头Styles from table cells (background color) and headings (background color and color) are applied only to table cells or headings. Mind that bold font in headings is a part of default browsers styles and wont be copied to the table cells.这一条揭示了两个层面的行为a样式提取的元素定位。复制格式时copyFormatting命令调用_extractStylesFromElementplugin.js从光标所在元素向上逐级提取样式但遇到breakOnElements中的元素就停止向上breakOnElements: [ ul, ol, table ],也就是说从单元格内提取样式时会一直走到table边界为止不会把表格外的段落/文档级样式也一并抓进来。提取时通过_convertElementToStyleDef把元素转换为CKEDITOR.STYLE_INLINE类型的样式定义并排除excludedAttributes中的无关属性excludedAttributes: [ id, style, href, data-cke-saved-href, dir ],b样式应用的目标映射。应用时_applyStylesToTableContextplugin.js按来源元素的类型决定目标if ( indexOf( [ table, tr ], style.element ) ! -1 ) { getNodeAndApplyCmd( range, style.element, function( currentNode ) { style.applyToObject( currentNode ); } ); } else if ( indexOf( [ td, th ], style.element ) ! -1 ) { getNodeAndApplyCmd( range, { td: 1, th: 1 }, function( currentNode ) { applyToTableCell( currentNode, style ); } ); } else if ( indexOf( [ thead, tbody ], style.element ) ! -1 ) { // ... 同样落到单元格 } else { CKEDITOR.plugins.copyformatting._applyStylesToTextContext( editor, range, [ style ] ); }其中applyToTableCell有一个关键细节如果目标单元格标签与样式来源标签不同如td样式应用到th会重建样式定义并把 element 改为目标单元格的标签再应用这正是表头背景色/文字色只作用于表头的实现基础。自动化测试test applyFormat on table context with table styles (within thead)applyformat.js验证了 thead 内th上样式的正确应用。关于表头加粗的提示th的font-weight: bold属于浏览器默认样式并非显式的内联样式因此 Copy Formatting 复制的是内联样式属性不会把浏览器默认加粗复制到普通单元格——这正是检查点要求测试人员留意的语义边界。检查点 3只有内联样式被应用到文本Only inline styles are applied to the text.Copy Formatting 提取的所有样式定义统一为type: CKEDITOR.STYLE_INLINE见_convertElementToStyleDef的注释与实现。应用时属于块级边界的元素会被转成内联span再应用inlineBoundary: [ h1, h2, h3, h4, h5, h6, p, div ],_filterStyles: function( styles ) { // 把 h1..h6/p/div 等块级元素名改为 span if ( CKEDITOR.tools.indexOf( CKEDITOR.plugins.copyformatting.inlineBoundary, styleDef.element ) ! -1 ) { styleDef.element styles[ i ].element span; } // 过滤掉空的 span if ( styleDef.element span isEmpty( styleDef.attributes ) isEmpty( styleDef.styles ) ) { continue; } }这也解释了 tables.html 样本中为何把背景色 文字色 字体 字号全部用span嵌套表达——它们是标准的内联样式载体复制/应用后以span style...的形式落在目标文本上而不会改变表格的块级结构。检查点 4应用样式后表格不被拆成两半The table is not splitted into two after applying styles.这是表格场景最经典的回归点。源码中有两处机制共同保障应用阶段使用书签bookmark保护选区_applyStylesToTableContext中对每个样式应用前后都执行bkm range.createBookmark(); ... range.moveToBookmark( bkm );并在注释中明确说明防止表格的怪异行为例如样式应用到所有单元格而不是仅选中的单元格。_applyStylesToListContext同样如此。清除旧样式阶段保留表格元素本身preservedElements中包含了全部表格相关元素preservedElements: [ ul, ol, li, td, th, tr, thead, tbody, table ],在先清除旧样式的监听器plugin.js中如果旧样式来源元素在preservedElements之列则调用_removeStylesFromElementInRange只剥离属性、不删除元素如td style...变成td从而保证表格结构完整对于表格等元素还启用了stopOnFirst只处理最外层避免连锁破坏。五、配套自动化测试把检查点固化为断言手动测试之外仓库还为表格场景提供了多组自动化测试可作为 CI 回归防线tests/plugins/copyformatting/applyformat.js覆盖表格上下文应用表格样式thead 内 th 样式应用段落与表格混合选区等场景直接调用CKEDITOR.plugins.copyformatting._applyFormat并断言最终 DOM 状态tests/plugins/copyformatting/applyformatcontext.js验证copyFormatting_allowedContexts配置对text/list/table三种上下文的开关行为。例如配置[ text ]时表格内应用样式的结果为空[]而配置[ text, table ]时表格上下文正常生效并且测试还覆盖了传入非法值如100时的安全兜底tests/plugins/copyformatting/undointegration.js 与 tests/plugins/copyformatting/manual/undointegration.md验证频繁移动选区后 Undo/Redo 按钮状态不被破坏保证格式刷操作可被撤销tests/plugins/copyformatting/_helpers/tools.js提供testApplyingFormat、fixHtml等公共断言辅助函数其中fixHtml还处理了 Safari/IE8 选区符号差异。测试通过 Bender 框架运行配置见 bender.js 与 bender-runner.config.json其中定义了 Bender 服务端口 9001、runner 端口 9002 及各平台浏览器列表。手动测试用例则由manualBrowsers机制承载测试人员启动 Bender 服务后即可在浏览器中逐条执行。六、可配置项按需裁剪表格场景行为tables.md场景中表格上下文默认完全可用是因为插件默认配置copyFormatting_allowedContexts true见 plugin.js。如需定制可在编辑器配置中覆盖以下选项配置项默认值作用示例copyFormatting_allowedContextstrue允许的上下文可选text、list、table设为数组即只允许列出的上下文config.copyFormatting_allowedContexts [ text, table ];copyFormatting_allowRulesb s u i em strong span p div td th ol ul li(*)[*]{*}允许提取样式的元素规则ACF 语法设为true关闭过滤config.copyFormatting_allowRules span(*)[*]{*};copyFormatting_disallowRules*data-cke-widget*,data-widget*,data-cke-realelement明确禁止提取样式的元素如 widgetconfig.copyFormatting_disallowRules span(important);copyFormatting_keystrokeCopyCtrl Shift C复制格式快捷键设为false关闭config.copyFormatting_keystrokeCopy CKEDITOR.CTRL CKEDITOR.SHIFT 66;copyFormatting_keystrokePasteCtrl Shift V应用格式快捷键config.copyFormatting_keystrokePaste false;copyFormatting_outerCursortrue激活格式刷时是否在整个页面显示禁用光标提示当前悬停位置不可应用格式config.copyFormatting_outerCursor false;其中copyFormatting_allowRules/copyFormatting_disallowRules通过State构造器构建的CKEDITOR.filter实例生效plugin.js并在extractFormatting事件中逐一校验editor.copyFormatting.filter.check( new CKEDITOR.style( style ), true, true )见 plugin.js——不符合规则的样式不会进入复制结果。七、运行与体验建议要亲身体验这套表格测试可按以下方式在仓库内运行安装依赖npm install仓库 package.json 的 devDependencies 中包含benderjs系列工具启动 Bender 服务端口配置见 bender-runner.config.json在浏览器中打开手动测试入口定位到tests/plugins/copyformatting/manual/tables.html页面按照第三节的操作步骤在两个编辑器中反复复制/粘贴表格样式逐条核对第四节四个检查点。操作时注意观察两类细节一是elementspath 面板它实时显示光标所在元素链如body table tbody tr td帮助你确认样式落点二是光标形态变化——激活格式刷后styles/copyformatting.css 会为.cke_copyformatting_active应用专用光标cursor.svg并用!important覆盖 Table Resize 插件的内联光标样式cke_copyformatting_tableresize_cursor这是插件在表格区域交互时特意处理过的细节。同时插件为无碍访问提供了屏幕阅读器通知_putScreenReaderMessage在复制/应用/取消时播报对应文案中文文案见 plugins/copyformatting/lang/zh-cn.js如格式已复制格式已应用。总结tables.md看似只是一份简短的手动测试清单但它浓缩了 Copy Formatting 插件在表格上下文中的全部关键行为契约混合选区、单元格/表头样式隔离、纯内联样式、结构完整性。配合 plugins/copyformatting/plugin.js 中_determineContext、_applyStylesToTableContext、breakOnElements、preservedElements等实现细节与 applyformat.js、applyformatcontext.js 的自动化断言开发者既能用手动流程复现问题也能从源码层面理解每个检查点为什么能通过从而在集成 Copy Formatting 时准确预测其在表格场景下的行为并借助copyFormatting_allowedContexts等配置按需裁剪功能范围。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐TIL 实战在 Go 中用 database/sql 与 go-sqlite3 连接 SQLite 数据库TIL 实战在 Go 中用 database/sql 与 go sqlite3 连接 SQLite 数据库 本篇技术指南以 TIL 仓库中的 connect前端UI组件旧 Mac 真的能装新系统吗一篇讲完 OCLP 安装与回滚的免费避坑指南旧 Mac 真的能装新系统吗一篇讲完 OCLP 安装与回滚的免费避坑指南 系统更新弹窗告诉你此 Mac 机型不再受支持的那一刻你多半会不甘心——机器明明前端UI组件CKEditor 4 Copy Formatting 插件 sticky粘性模式手动测试规程与源码实现解析CKEditor 4 Copy Formatting 插件 sticky粘性模式手动测试规程与源码实现解析 导读 本文围绕 CKEditor 4 仓库中的前端UI组件上一篇RevokeMsgPatcher完整指南PC版微信/QQ/TIM一键防撤回补丁下一篇NCM转MP3教程ncmdump三步无损解开网易云加密音乐创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/16 6:16:06 · 阅读 1.2k CKEditor 4 Copy Formatting 插件表格场景手动测试全解：从操作步骤到源码实现
前端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/copyformatting/manual/tables.md 展开系统讲解 Copy Formatting格式刷插件在表格table这一特殊上下文中的行为验证方法并结合 plugins/copyformatting/plugin.js 源码、tests/plugins/copyformatting/下的自动化测试以及 styles/copyformatting.css 样式文件深入剖析单元格样式隔离、表头样式、混合选区、表格结构不被破坏背后的实现原理。读完本文你将能够独立运行这套手动测试理解表格上下文样式复制/粘贴的底层机制并学会通过copyFormatting_allowedContexts、copyFormatting_allowRules等配置精确控制插件行为。一、测试用例定位tables.md 在仓库中的角色tables.md是 Bender 测试框架下的一个**手动测试manual test**用例与同目录的tables.html配套使用。其文件头部的元数据声明了运行环境bender-ui: collapsed bender-tags: bug, copyformatting, 4.6.0 bender-ckeditor-plugins: copyformatting, toolbar, wysiwygarea, floatingspace, elementspath, table, tabletools, undobender-ui: collapsed手动测试页面以折叠的 UI 方式呈现便于测试人员专注操作bender-tags: bug, copyformatting, 4.6.0该用例自 Copy Formatting 功能引入的版本4.6.0起即被用于回归验证bender-ckeditor-plugins声明了测试页面需要加载的插件集合其中copyformatting、table、tabletools是表格场景的核心依赖wysiwygarea、floatingspace、elementspath、toolbar负责编辑器框架与界面undo用于验证撤销/重做集成。整个tests/plugins/copyformatting/manual/目录还包含lists.md、keystroke.md、sticky.md、allowedcontexts.md、links.md、undointegration.md等二十余个用例分别覆盖列表、快捷键、粘性模式、上下文限制、链接、撤销集成等维度tables.md专门聚焦表格这一最容易出问题的结构。二、测试准备理解配套的 tables.html 页面手动测试的操作台是 tests/plugins/copyformatting/manual/tables.html。页面创建了两个编辑器实例script CKEDITOR.replace( editor1, { allowedContent: true, extraPlugins: sourcearea } ); CKEDITOR.inline( editor2, { allowedContent: true, extraPlugins: dialog,sourcedialog } ); /scripteditor1是经典classic编辑器CKEDITOR.replace基于wysiwygareaiframeeditor2是行内inline编辑器CKEDITOR.inline。两个编辑器配置了allowedContent: true关闭 ACF 内容过滤限制确保测试时样式不会被过滤器拦截。页面内的表格内容经过精心构造覆盖了大量样式组合是验证插件行为的富样式样本带表头的复杂表格包含thead与th scopecol表头单元格内嵌多层span组合了字体族Comic Sans MS、字号20px、斜体、加粗、下划线、文字颜色#DAA520与背景色#00FF00用于验证表头样式是否被正确复制/隔离富样式数据单元格包含水平对齐center、垂直对齐top、word wrapnowrap、背景色orange、边框色plum等用于验证单元格级 CSS 属性是否只作用到单元格文字级样式样本背景色 文字颜色 字体Times New Roman 字号26px嵌套组合用于验证文本内联样式与单元格样式是否被区分对待表格级属性aligncenter、border5、width90%、border-collapse: collapse、dirltr以及另一张table-layout: fixed; width: 500px的固定宽度表格用于验证表格结构属性是否被误改。三、核心操作步骤继承原文档 Procedure原文档给出的操作步骤非常简洁但作为手动测试其玩转Play with tables背后隐含着一套标准操作流。结合copyformatting插件的交互模型工具栏按钮 鼠标点击 快捷键完整步骤如下在editor1经典编辑器中将光标放入任意带样式的文本/单元格点击工具栏中的Copy Formatting按钮或按Ctrl Shift C复制格式此时按钮进入按下On状态光标变为插件专用光标移动光标到目标位置可以是另一个单元格、表头、表格外的段落点击鼠标左键应用格式也可以先框选一段文本再应用如需连续粘贴双击Copy Formatting 按钮进入 sticky粘性模式可反复点击多处再次点击按钮或按Esc退出在editor2行内编辑器中重复以上操作验证两种编辑器形态下行为一致结合elementspath元素路径面板观察当前光标所处的 DOM 层级便于判断样式实际作用到了哪个元素。四、Things to check四个检查点逐条解读原文档列出的四个检查点正是表格场景最容易出 Bug 的四个维度每一条背后都有明确的源码逻辑支撑。检查点 1混合上下文选区跨段落与表格下样式正确应用Styles are applied correctly even in the mixed context (e.g. selection begins in a paragraph and ends in a table).当选区起点在普通段落、终点落在表格内部时插件需要把样式同时应用到两处。插件先通过_determineContext( range )判断选区所属上下文见 plugin.js_determineContext: function( range ) { function detect( query ) { /* 用 walker 遍历 range 内节点检测祖先 */ } if ( detect( { ul: 1, ol: 1 } ) ) { return list; } else if ( detect( table ) ) { return table; } else { return text; } }随后在applyFormatting事件监听器中按上下文分发plugin.jseditor.copyFormatting.on( applyFormatting, function( evt ) { var context plugin._determineContext( evt.data.range ); if ( context list editor.copyFormatting._isContextAllowed( list ) ) { plugin._applyStylesToListContext( evt.editor, evt.data.range, evt.data.styles ); } else if ( context table editor.copyFormatting._isContextAllowed( table ) ) { plugin._applyStylesToTableContext( evt.editor, evt.data.range, evt.data.styles ); } else if ( editor.copyFormatting._isContextAllowed( text ) ) { plugin._applyStylesToTextContext( evt.editor, evt.data.range, evt.data.styles ); } }, null, null, 999 );注意该监听器的优先级为 999晚于默认优先级10的先清除旧样式监听器执行。_applyStylesToTableContext内部对不属于表格专属元素的样式如b、span会回退调用_applyStylesToTextContext从而保证混合选区中段落部分也能获得样式。自动化测试 tests/plugins/copyformatting/applyformat.js 的test applyFormat on mixed context with table styles用例使用选区pApply for{mat/ptabletrtdMaybe h}ere/td/tr/table精确验证了这一行为断言表格单元格td内应用了 4 个样式、段落p内应用了 1 个样式且td上text-decoration: underline生效。检查点 2单元格与表头样式只作用于单元格/表头Styles from table cells (background color) and headings (background color and color) are applied only to table cells or headings. Mind that bold font in headings is a part of default browsers styles and wont be copied to the table cells.这一条揭示了两个层面的行为a样式提取的元素定位。复制格式时copyFormatting命令调用_extractStylesFromElementplugin.js从光标所在元素向上逐级提取样式但遇到breakOnElements中的元素就停止向上breakOnElements: [ ul, ol, table ],也就是说从单元格内提取样式时会一直走到table边界为止不会把表格外的段落/文档级样式也一并抓进来。提取时通过_convertElementToStyleDef把元素转换为CKEDITOR.STYLE_INLINE类型的样式定义并排除excludedAttributes中的无关属性excludedAttributes: [ id, style, href, data-cke-saved-href, dir ],b样式应用的目标映射。应用时_applyStylesToTableContextplugin.js按来源元素的类型决定目标if ( indexOf( [ table, tr ], style.element ) ! -1 ) { getNodeAndApplyCmd( range, style.element, function( currentNode ) { style.applyToObject( currentNode ); } ); } else if ( indexOf( [ td, th ], style.element ) ! -1 ) { getNodeAndApplyCmd( range, { td: 1, th: 1 }, function( currentNode ) { applyToTableCell( currentNode, style ); } ); } else if ( indexOf( [ thead, tbody ], style.element ) ! -1 ) { // ... 同样落到单元格 } else { CKEDITOR.plugins.copyformatting._applyStylesToTextContext( editor, range, [ style ] ); }其中applyToTableCell有一个关键细节如果目标单元格标签与样式来源标签不同如td样式应用到th会重建样式定义并把 element 改为目标单元格的标签再应用这正是表头背景色/文字色只作用于表头的实现基础。自动化测试test applyFormat on table context with table styles (within thead)applyformat.js验证了 thead 内th上样式的正确应用。关于表头加粗的提示th的font-weight: bold属于浏览器默认样式并非显式的内联样式因此 Copy Formatting 复制的是内联样式属性不会把浏览器默认加粗复制到普通单元格——这正是检查点要求测试人员留意的语义边界。检查点 3只有内联样式被应用到文本Only inline styles are applied to the text.Copy Formatting 提取的所有样式定义统一为type: CKEDITOR.STYLE_INLINE见_convertElementToStyleDef的注释与实现。应用时属于块级边界的元素会被转成内联span再应用inlineBoundary: [ h1, h2, h3, h4, h5, h6, p, div ],_filterStyles: function( styles ) { // 把 h1..h6/p/div 等块级元素名改为 span if ( CKEDITOR.tools.indexOf( CKEDITOR.plugins.copyformatting.inlineBoundary, styleDef.element ) ! -1 ) { styleDef.element styles[ i ].element span; } // 过滤掉空的 span if ( styleDef.element span isEmpty( styleDef.attributes ) isEmpty( styleDef.styles ) ) { continue; } }这也解释了 tables.html 样本中为何把背景色 文字色 字体 字号全部用span嵌套表达——它们是标准的内联样式载体复制/应用后以span style...的形式落在目标文本上而不会改变表格的块级结构。检查点 4应用样式后表格不被拆成两半The table is not splitted into two after applying styles.这是表格场景最经典的回归点。源码中有两处机制共同保障应用阶段使用书签bookmark保护选区_applyStylesToTableContext中对每个样式应用前后都执行bkm range.createBookmark(); ... range.moveToBookmark( bkm );并在注释中明确说明防止表格的怪异行为例如样式应用到所有单元格而不是仅选中的单元格。_applyStylesToListContext同样如此。清除旧样式阶段保留表格元素本身preservedElements中包含了全部表格相关元素preservedElements: [ ul, ol, li, td, th, tr, thead, tbody, table ],在先清除旧样式的监听器plugin.js中如果旧样式来源元素在preservedElements之列则调用_removeStylesFromElementInRange只剥离属性、不删除元素如td style...变成td从而保证表格结构完整对于表格等元素还启用了stopOnFirst只处理最外层避免连锁破坏。五、配套自动化测试把检查点固化为断言手动测试之外仓库还为表格场景提供了多组自动化测试可作为 CI 回归防线tests/plugins/copyformatting/applyformat.js覆盖表格上下文应用表格样式thead 内 th 样式应用段落与表格混合选区等场景直接调用CKEDITOR.plugins.copyformatting._applyFormat并断言最终 DOM 状态tests/plugins/copyformatting/applyformatcontext.js验证copyFormatting_allowedContexts配置对text/list/table三种上下文的开关行为。例如配置[ text ]时表格内应用样式的结果为空[]而配置[ text, table ]时表格上下文正常生效并且测试还覆盖了传入非法值如100时的安全兜底tests/plugins/copyformatting/undointegration.js 与 tests/plugins/copyformatting/manual/undointegration.md验证频繁移动选区后 Undo/Redo 按钮状态不被破坏保证格式刷操作可被撤销tests/plugins/copyformatting/_helpers/tools.js提供testApplyingFormat、fixHtml等公共断言辅助函数其中fixHtml还处理了 Safari/IE8 选区符号差异。测试通过 Bender 框架运行配置见 bender.js 与 bender-runner.config.json其中定义了 Bender 服务端口 9001、runner 端口 9002 及各平台浏览器列表。手动测试用例则由manualBrowsers机制承载测试人员启动 Bender 服务后即可在浏览器中逐条执行。六、可配置项按需裁剪表格场景行为tables.md场景中表格上下文默认完全可用是因为插件默认配置copyFormatting_allowedContexts true见 plugin.js。如需定制可在编辑器配置中覆盖以下选项配置项默认值作用示例copyFormatting_allowedContextstrue允许的上下文可选text、list、table设为数组即只允许列出的上下文config.copyFormatting_allowedContexts [ text, table ];copyFormatting_allowRulesb s u i em strong span p div td th ol ul li(*)[*]{*}允许提取样式的元素规则ACF 语法设为true关闭过滤config.copyFormatting_allowRules span(*)[*]{*};copyFormatting_disallowRules*data-cke-widget*,data-widget*,data-cke-realelement明确禁止提取样式的元素如 widgetconfig.copyFormatting_disallowRules span(important);copyFormatting_keystrokeCopyCtrl Shift C复制格式快捷键设为false关闭config.copyFormatting_keystrokeCopy CKEDITOR.CTRL CKEDITOR.SHIFT 66;copyFormatting_keystrokePasteCtrl Shift V应用格式快捷键config.copyFormatting_keystrokePaste false;copyFormatting_outerCursortrue激活格式刷时是否在整个页面显示禁用光标提示当前悬停位置不可应用格式config.copyFormatting_outerCursor false;其中copyFormatting_allowRules/copyFormatting_disallowRules通过State构造器构建的CKEDITOR.filter实例生效plugin.js并在extractFormatting事件中逐一校验editor.copyFormatting.filter.check( new CKEDITOR.style( style ), true, true )见 plugin.js——不符合规则的样式不会进入复制结果。七、运行与体验建议要亲身体验这套表格测试可按以下方式在仓库内运行安装依赖npm install仓库 package.json 的 devDependencies 中包含benderjs系列工具启动 Bender 服务端口配置见 bender-runner.config.json在浏览器中打开手动测试入口定位到tests/plugins/copyformatting/manual/tables.html页面按照第三节的操作步骤在两个编辑器中反复复制/粘贴表格样式逐条核对第四节四个检查点。操作时注意观察两类细节一是elementspath 面板它实时显示光标所在元素链如body table tbody tr td帮助你确认样式落点二是光标形态变化——激活格式刷后styles/copyformatting.css 会为.cke_copyformatting_active应用专用光标cursor.svg并用!important覆盖 Table Resize 插件的内联光标样式cke_copyformatting_tableresize_cursor这是插件在表格区域交互时特意处理过的细节。同时插件为无碍访问提供了屏幕阅读器通知_putScreenReaderMessage在复制/应用/取消时播报对应文案中文文案见 plugins/copyformatting/lang/zh-cn.js如格式已复制格式已应用。总结tables.md看似只是一份简短的手动测试清单但它浓缩了 Copy Formatting 插件在表格上下文中的全部关键行为契约混合选区、单元格/表头样式隔离、纯内联样式、结构完整性。配合 plugins/copyformatting/plugin.js 中_determineContext、_applyStylesToTableContext、breakOnElements、preservedElements等实现细节与 applyformat.js、applyformatcontext.js 的自动化断言开发者既能用手动流程复现问题也能从源码层面理解每个检查点为什么能通过从而在集成 Copy Formatting 时准确预测其在表格场景下的行为并借助copyFormatting_allowedContexts等配置按需裁剪功能范围。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐TIL 实战在 Go 中用 database/sql 与 go-sqlite3 连接 SQLite 数据库TIL 实战在 Go 中用 database/sql 与 go sqlite3 连接 SQLite 数据库 本篇技术指南以 TIL 仓库中的 connect前端UI组件旧 Mac 真的能装新系统吗一篇讲完 OCLP 安装与回滚的免费避坑指南旧 Mac 真的能装新系统吗一篇讲完 OCLP 安装与回滚的免费避坑指南 系统更新弹窗告诉你此 Mac 机型不再受支持的那一刻你多半会不甘心——机器明明前端UI组件CKEditor 4 Copy Formatting 插件 sticky粘性模式手动测试规程与源码实现解析CKEditor 4 Copy Formatting 插件 sticky粘性模式手动测试规程与源码实现解析 导读 本文围绕 CKEditor 4 仓库中的前端UI组件上一篇RevokeMsgPatcher完整指南PC版微信/QQ/TIM一键防撤回补丁下一篇NCM转MP3教程ncmdump三步无损解开网易云加密音乐创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考