前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载导读从 Microsoft Excel 复制表格粘贴进 CKEditor 4 时单元格的背景色、字体、对齐等格式常常丢失这是因为编辑器无法将 Excel 的剪贴板 HTML 正确识别为 Office 内容从而绕过了 Paste from Word 的清理与样式保留管线。本篇文章以仓库中tests/plugins/pastefromword/manual/preserveexcelstyles.md这一针对缺陷 #3586 的手动测试文档为核心完整解读其测试步骤与 Bender 测试元数据并结合pastefromword插件的源码剖析 Excel 内容识别、过滤器清理与背景色保留的底层实现最后给出相关配置项与自动化测试证据帮助开发者理解并验证这一功能。一、测试文档概览preserveexcelstyles 的测试意图仓库中的手动测试文档 preserveexcelstyles.md 是 CKEditor 4 针对缺陷 #3586设计的回归测试。该缺陷在 CHANGES.md 的 4.13.1 版本修复记录中有明确记载[#3586] Fixed: Content pasted from Microsoft Excel is not correctly recognised by the Paste from Word plugin.即从 Microsoft Excel 粘贴的内容无法被 Paste from Word 插件正确识别进而导致 Excel 表格的样式尤其是背景色在粘贴后被丢弃。同一版本的修复还包括 [#3585]Firefox 下 Excel 内容被粘贴为图片与 [#3625]Firefox 下 PowerPoint 内容被粘贴为图片可见 4.13.1 版本集中处理了 Office 内容识别的浏览器兼容问题。该测试的完整步骤十分简洁聚焦于一个最典型的用户场景打开示例 Excel 文件tests/plugins/pastefromword/manual/_assets/3586.xlsx复制其中的蓝色表格blue table将其粘贴到编辑器实例中。测试预期Expected为格式被保留异常表现Unexpected为格式尤其是背景色未被保留。从这组预期/异常对比可以看出本测试的核心验收点就是表格单元格的背景色及其他格式在内联样式层面得到保留。二、解读 Bender 测试元数据bender-tags 系列标签文档开头三行是 CKEditor 4 测试框架 Bender 的元数据声明它们决定了该测试的归属、运行方式与依赖环境bender-tags: bug, 4.13.1, 3586标记这是一个bug 回归测试针对 4.13.1 版本引入的修复缺陷编号 3586。bender-ui: collapsed测试运行时 UI 面板默认折叠聚焦于编辑器内容本身。bender-ckeditor-plugins: wysiwygarea, toolbar, undo, basicstyles, pastefromword, elementspath, tabletools, justify, colorbutton声明测试页面需要加载的插件集合。其中pastefromword是核心被测插件wysiwygarea提供所见即所得编辑区tabletools提供表格相关工具colorbutton与颜色格式相关便于观察背景色justify负责对齐格式undo与basicstyles、elementspath则为工具栏与基础操作提供支撑。pastefromword插件本身声明requires: pastetools见 plugin.js因此pastetools与其依赖的clipboard也会被自动加载。与之配套的页面文件 preserveexcelstyles.html 展示了测试宿主页的最小结构页面包含一个div ideditor容器脚本调用CKEDITOR.replace( editor )创建编辑器。值得注意的兼容性处理script if ( CKEDITOR.env.safari || ( CKEDITOR.env.ie CKEDITOR.env.version 9 ) ) { bender.ignore(); } CKEDITOR.replace( editor ); /script即该测试在Safari 以及 IE 9 以下版本会被bender.ignore()跳过。这与 #3585/#3625 中提到的浏览器差异一致不同浏览器向剪贴板暴露的数据类型不同旧浏览器无法提供完整的自定义数据类型。三、底层原理pastefromword 插件如何认出Excel 内容理解该测试为什么能验证格式保留需要先弄清 Paste from Word 的识别与处理管线。核心逻辑位于 plugins/pastefromword/plugin.js。3.1 注册 pastefromword 命令与工具栏按钮插件初始化时注册了pastefromword命令其exec会强制走一次paste命令forceFromWord 1并传入type: html与通知参数同时通过CKEDITOR.plugins.clipboard.addPasteButton注册了工具栏按钮toolbar 位置clipboard,50plugin.js。3.2 canHandleExcel 内容识别的关键路径插件通过editor.pasteTools.register(...)注册一个处理器其中canHandle决定一段粘贴内容是否被当作 Office 内容处理plugin.jscanHandle: function( evt ) { var data evt.data, // Always get raw clipboard data (#3586). mswordHtml CKEDITOR.plugins.pastetools.getClipboardData( data, text/html ), generatorName CKEDITOR.plugins.pastetools.getContentGeneratorName( mswordHtml ), wordRegexp /(class?Mso|style[][^]*?\bmso\-|w:WordDocument|o:\w|\/font)/, // Use wordRegexp only when there is no meta generator tag in the content isOfficeContent generatorName ? generatorName microsoft : wordRegexp.test( mswordHtml ); return mswordHtml ( forceFromWord || isOfficeContent ); }这段代码直接体现了 #3586 的修复方式——源码注释明确写着// Always get raw clipboard data (#3586).。修复前的识别链路可能受浏览器剪贴板数据类型暴露方式影响拿不到原始text/html修复后统一通过getClipboardData( data, text/html )获取原始剪贴板 HTML再从两个维度判断getContentGeneratorName检查meta namegenerator标签。该方法定义在 plugins/pastetools/plugin.js解析content属性中的生成器名称以microsoft开头返回microsoft以libreoffice开头返回libreoffice其余返回unknown无该标签则返回undefined。Excel 复制内容通常带Microsoft Excel的 generator 信息因此直接命中microsoft。wordRegexp正则兜底。若没有 generator 标签则用正则匹配classMso、mso-样式前缀、w:WordDocument、o:\w、/font等 Office 特征。源码注释说明该正则只在没有 meta generator 标签时才启用。只有当mswordHtml存在且用户显式点击了 Paste from Word 按钮或内容被判定为 Office 内容时才会进入handle阶段。3.3 handlecleanWord 清理与事件钩子handle阶段plugin.js依次执行触发可取消的pasteFromWord事件4.6.0 引入若监听器返回false且非强制粘贴则中断处理设置data.dontFilter true避免被普通粘贴过滤器二次处理对应 ticket 13093调用CKEDITOR.cleanWord( pfwEvtData.dataValue, editor )执行 Word/Excel 内容清理若浏览器支持自定义数据类型CKEDITOR.plugins.clipboard.isCustomDataTypesSupported且未禁用内联图片则对 RTF 剪贴板中的图片执行CKEDITOR.pasteFilters.image处理触发afterPasteFromWord事件4.6.0 引入此时data.dataValue已是清理后的内容监听器仍可修改若配置了forcePasteAsPlainText true则强制转为纯文本在旧浏览器不支持自定义复制粘贴且配置为allow-word时恢复data.type html对应 #1013 与 #1638。这套识别 → 清理 → 事件钩子的管线正是蓝色表格背景色得以保留的机制基础只要内容被识别为 Office 内容就会进入 default.js 的样式保留过滤器。四、样式如何被保留filter/default.js 中的 Excel 类清理与样式归一化真正决定背景色保不保留的是默认过滤器 plugins/pastefromword/filter/default.js约 1961 行从 4.13.0 起注册为CKEDITOR.plugins.pastetools.filters.word。其中与 Excel 表格样式保留直接相关的规则有移除 Excel 默认类名default.js 对class属性执行清理时源码注释明确写道The (el\d)|(font\d) are default Excel classes for table cells and text.即 Excel 为单元格与文本生成的el1、el2、font1这类默认类名以及msonormal、msolistparagraph*等会被替换移除因为这些类名在目标页面中通常不存在留在 HTML 里只会产生无意义的残留。移除 Office 专有属性cellspacing、cellpadding、border、v:shapes、o:spid等会被删除remove规则这些是 Word/Excel 导出的布局与 VML 形状残留。内联样式保留与归一化default.js 大量使用Style.createStyleStack、Style.normalizedStyles来自 pastetools/filter/common.js对元素的内联style进行归一化normalizedStyles( element, editor )在 default.js 附近被用作样式处理的入口。背景色background-color、字体颜色、字号、对齐方式等以内联 style 形式存在的格式因此得以保留。无效标签与形状清理invalidTags列表o:p、xml、script、meta、link与shapeTags列表v:arc、v:curve、v:line、v:oval等 VML 形状会被移除确保最终 HTML 只保留语义化内容。与此互补的是另一个手动测试 fontbackground.md它明确了背景色的输出形态粘贴带背景色的 Word 文本后打开源码视图期望看到的是带background-color属性的span元素而非简写形式background。这说明过滤器在归一化时倾向展开为更明确、可被编辑器保留的 CSS 属性形式。五、相关配置项围绕 Paste from Word 的样式处理pastefromword插件plugin.js暴露了以下配置项可用于调整行为配置项默认值说明pasteFromWordPromptCleanupfalse粘贴 Word/Excel 内容前是否弹出清理确认提示3.1.0 引入。设为true时每次粘贴都会先confirm。pasteFromWordCleanupFileplugin path filter/default.js自定义清理过滤器文件路径3.1.0 引入。这是所有编辑器实例共享的全局配置可传相对安装目录的路径、绝对路径或完整 URL。pasteFromWord_inlineImagestrue是否将 Word 内容中的图片以内联形式嵌入4.8.0 引入。依赖 Clipboard API 支持isCustomDataTypesSupported设为false可禁用。pasteFromWord_keepZeroMarginsfalse是否保留零外边距4.12.0 引入4.13.0 起废弃改由pasteTools_keepZeroMargins接管。自定义清理文件的三种写法示例摘自 plugin.js// 相对 CKEditor 安装目录的路径 CKEDITOR.config.pasteFromWordCleanupFile plugins/pastefromword/filter/custom.js; // 包含安装目录的完整路径 CKEDITOR.config.pasteFromWordCleanupFile /ckeditor/plugins/pastefromword/filter/custom.js; // 服务器根目录下的完整 URL CKEDITOR.config.pasteFromWordCleanupFile http://my.example.com/customFilters/custom.js;六、验证手段自动化生成测试与同类手动测试除本文档外仓库还提供了多层次的验证手段生成式测试tests/plugins/pastefromword/generated/excel.js 针对 Excel 2013/2016 两个版本覆盖Table_text_attributes/Cell_text单元格文本格式、Table_text_attributes/Mixed混合格式与Meta_generator/ExcelExcel 元生成器标签识别等用例并对 IE8/IE11/不支持 dataTransfer 的旧浏览器设置了ignore豁免——与 preserveexcelstyles 页面中跳过 Safari/旧 IE 的思路一致。同类手动测试pastefromexcel.md4.7.0对应 ticket 16961明确列出了基本格式的范围字体颜色、字重、装饰、字号、对齐以及单元格背景、宽度、高度、水平/垂直对齐——这正是从 Excel 粘贴时需要保留的完整格式集合可作为排查样式丢失时的检查清单。版本里程碑CHANGES.md 显示从 Excel 粘贴的支持始于 4.7.0ticket 16961 Added support for pasting from Microsoft Excel4.13.1 修复识别缺陷 #3586并伴随 #3585、#3625 两个 Firefox 图片化粘贴问题的修复。七、如何在本地运行该手动测试该测试位于 tests/plugins/pastefromword/manual/preserveexcelstyles.md运行方式是仓库的 Bender 手动测试流程确认3586.xlsx资产存在tests/plugins/pastefromword/manual/_assets/3586.xlsx启动 Bender 测试服务器仓库根目录的 bender.js 配置了测试任务打开 manual tests 面板找到 pastefromword 组的 preserveexcelstyles 用例在 Chrome/Edge 或 Firefox避开 Safari 与 IE9 以下页面会bender.ignore()打开该用例页面用 Excel 打开示例文件复制蓝色表格粘贴进编辑器验收标准粘贴后表格可见背景色等格式打开源码视图确认背景以background-color形式存在于内联样式中。若背景色消失即复现了 #3586 的异常表现。结语preserveexcelstyles虽然只有寥寥几步却是 CKEditor 4 中Office 内容识别 → 过滤器清理 → 内联样式保留整条管线的浓缩验证。其背后是pastefromword插件对原始剪贴板 HTML 的可靠获取#3586 修复点、pastetools的 generator 识别、以及filter/default.js对 Excel 默认类名的清理与样式归一化。理解这条链路不仅有助于排查 Excel/Word 粘贴样式丢失问题也为自定义pasteFromWordCleanupFile过滤器提供了清晰的切入点。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 Paste from Word 粘贴回归测试指南regularpaste 手动测试用例深度解析CKEditor 4 Paste from Word 粘贴回归测试指南regularpaste 手动测试用例深度解析 本文以 CKEditor 4 仓库中 r前端UI组件CKEditor 4 从 Excel 粘贴表格并保留格式pastefromword 插件的样式还原机制与测试验证CKEditor 4 从 Excel 粘贴表格并保留格式pastefromword 插件的样式还原机制与测试验证 本文以 CKEditor 4 仓库中针对从前端UI组件CKEditor 4 从 Word/Excel 粘贴表格时保留自定义单元格边框的测试方法与底层原理CKEditor 4 从 Word/Excel 粘贴表格时保留自定义单元格边框的测试方法与底层原理 本篇技术指南围绕 CKEditor 4 仓库中的手动测试用例前端UI组件上一篇DeepSeek-R1-Distill-Qwen-32B系统提示规避用户prompt设计最佳实践下一篇CLIP模型批量大小选择性能与效率平衡创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考