CMS企业官网Word内容导入功能开发日志2023年11月15日 - 需求分析与技术调研作为四川的一名.NET程序员我刚接手了一个CMS企业官网外包项目的新需求。客户希望在CKEditor 4编辑器中增加从Office文档导入内容的功能特别是要支持公式和形状的保留。需求梳理核心需求支持Word一键粘贴保留样式、图片、公式等支持Word/Excel/PPT/PDF文档导入支持微信公众号内容导入保留所有复杂元素公式(Latex/MathType)、形状组、表格等图片自动上传至阿里云OSS以插件方式集成到现有CKEditor 4预算控制在99元以内技术评估现有环境前端Vue2 CKEditor 4后端ASP.NET WebForm存储阿里云OSS服务器阿里云ECS方案调研CKEditor插件方案测试了Paste from Word插件发现对公式和形状支持不足开源方案mammoth.js可以转换.docx为HTML但公式支持有限商业产品调研TX Text Control功能强大但超出预算Aspose.Words转换效果不错但.NET版授权费高Spire.Office99元/开发者刚好符合预算测试发现对EMZ/WMZ公式支持良好WordPaster完全开源(下载源码)测试发现对EMZ/WMZ公式支持良好支持Latex自动转MathML公式处理方案MathType SDK专业但昂贵开源方案katex只支持LaTeX渲染不识别Word原生公式决定采用方案使用Spire.Office for .NET (99元永久授权)开发CKEditor 4自定义插件后端使用Spire库处理文档转换图片上传使用阿里云OSS SDK2023年11月16日 - 开发环境准备采购与安装购买Spire.Office for .NET开发者授权99元在Visual Studio 2022中安装Spire.Office NuGet包Install-PackageSpire.Office-Version 8.8.0配置阿里云OSS SDK// Web.config配置插件结构设计规划CKEditor插件目录结构/plugins/officeimport/ ├── plugin.js // 主插件文件 ├── dialogs/ │ └── importdialog.js // 导入对话框 ├── icons/ │ └── officeimport.png // 工具栏图标 └── styles/ └── officeimport.css // 插件样式2023年11月17日 - 前端插件开发CKEditor插件核心代码// plugin.jsCKEDITOR.plugins.add(officeimport,{icons:officeimport,init:function(editor){editor.addCommand(showImportDialog,{exec:function(editor){editor.openDialog(importDialog);}});editor.ui.addButton(OfficeImport,{label:导入Office文档,command:showImportDialog,toolbar:insert});CKEDITOR.dialog.add(importDialog,this.pathdialogs/importdialog.js);}});导入对话框实现// dialogs/importdialog.jsCKEDITOR.dialog.add(importDialog,function(editor){return{title:导入Office文档,minWidth:400,minHeight:200,contents:[{id:tab1,label:导入选项,elements:[{type:file,id:fileInput,label:选择文件,validate:CKEDITOR.dialog.validate.notEmpty(请选择文件)},{type:radio,id:importType,label:导入类型,items:[[Word文档,word],[Excel文档,excel],[PPT文档,ppt],[PDF文档,pdf],[微信公众号,wechat]],default:word}]}],onOk:function(){varfilethis.getValueOf(tab1,fileInput);vartypethis.getValueOf(tab1,importType);// 使用FormData上传文件varformDatanewFormData();formData.append(file,file);formData.append(type,type);// 显示加载状态editor.showNotification(正在处理文档...,info);// 发送到后端处理fetch(/Handlers/OfficeImport.ashx,{method:POST,body:formData}).then(responseresponse.text()).then(html{editor.insertHtml(html);editor.hideNotification();}).catch(error{editor.showNotification(导入失败: error.message,error);});}};});2023年11月18日 - 后端处理开发ASP.NET WebForm处理程序// OfficeImport.ashxpublicclassOfficeImport:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypetext/html;try{HttpPostedFilefilecontext.Request.Files[file];stringimportTypecontext.Request[type];if(filenull||file.ContentLength0){thrownewException(未上传文件);}stringtempPathPath.Combine(Path.GetTempPath(),Guid.NewGuid().ToString()Path.GetExtension(file.FileName));file.SaveAs(tempPath);stringhtmlContent;switch(importType){caseword:htmlContentProcessWordFile(tempPath,context);break;caseexcel:htmlContentProcessExcelFile(tempPath,context);break;// 其他类型处理...}context.Response.Write(htmlContent);}catch(Exceptionex){context.Response.Write($导入错误:{HttpUtility.HtmlEncode(ex.Message)});}}privatestringProcessWordFile(stringfilePath,HttpContextcontext){// 使用Spire.Doc处理Word文档Spire.Doc.DocumentdocnewSpire.Doc.Document();doc.LoadFromFile(filePath);// 图片上传回调doc.HTMLExportOptions.ImageEmbedded(sender,args){stringimageUrlUploadImageToOSS(args.ImageData,context);args.ImageUrlimageUrl;};// 保留公式和形状doc.HTMLExportOptions.IsEmbeddedtrue;doc.HTMLExportOptions.CssExportModeCssExportMode.Inline;doc.HTMLExportOptions.ImageEmbeddedtrue;// 转换为HTMLstringhtmldoc.SaveToHtml();// 后处理HTMLhtmlPostProcessHtml(html);returnhtml;}privatestringUploadImageToOSS(byte[]imageData,HttpContextcontext){// 使用阿里云OSS SDK上传图片stringendpointConfigurationManager.AppSettings[OSS_Endpoint];stringaccessKeyIdConfigurationManager.AppSettings[OSS_AccessKeyId];stringaccessKeySecretConfigurationManager.AppSettings[OSS_AccessKeySecret];stringbucketNameConfigurationManager.AppSettings[OSS_BucketName];stringobjectNameuploads/DateTime.Now.ToString(yyyyMM)/Guid.NewGuid().ToString().png;OssClientclientnewOssClient(endpoint,accessKeyId,accessKeySecret);using(MemoryStreamstreamnewMemoryStream(imageData)){client.PutObject(bucketName,objectName,stream);}return$https://{bucketName}.{endpoint}/{objectName};}privatestringPostProcessHtml(stringhtml){// 处理Spire导出的HTML适应CKEditor// 1. 转换EMZ/WMZ公式为MathML// 2. 调整表格样式// 3. 清理不必要的标签returnhtml;}publicboolIsReusablefalse;}2023年11月19日 - 集成与测试前端集成步骤将插件目录放入CKEditor的plugins文件夹修改CKEditor配置CKEDITOR.replace(editor,{extraPlugins:officeimport,toolbar:[{name:insert,items:[OfficeImport,Image,Table]}// 其他工具栏配置...]});测试结果测试用例1Word文档导入包含复杂表格、图片和MathType公式的.docx文件结果表格结构保留完整图片自动上传至OSS公式显示正确测试用例2微信公众号内容粘贴从微信文章复制富文本内容结果样式保留良好图片自动替换为OSS链接测试用例3Excel表格导入包含合并单元格的.xlsx文件结果转换为HTML表格合并单元格效果保留发现的问题某些特殊形状组导出后有偏移解决方案在后处理中调整CSS定位PDF导入时复杂布局丢失解决方案针对PDF使用不同的解析策略2023年11月20日 - 优化与交付性能优化添加服务器端缓存// 对已处理的文档进行MD5缓存stringcacheKeyComputeFileHash(tempPath);if(context.Cache[cacheKey]!null){return(string)context.Cache[cacheKey];}context.Cache.Insert(cacheKey,htmlContent,null,DateTime.Now.AddHours(1),Cache.NoSlidingExpiration);添加客户端粘贴监控editor.on(paste,function(evt){varhtmlevt.data.dataValue;if(html.indexOf(classMso)-1){// 检测到Word内容进行特殊处理evt.data.dataValuecleanWordHtml(html);}});最终交付插件打包为单个ZIP文件编写使用文档## Office内容导入插件使用指南 1. 在工具栏点击导入Office按钮 2. 选择要导入的文件 3. 选择文件类型(Word/Excel/PPT/PDF/微信) 4. 点击确定内容将自动导入编辑器 ### 注意事项 - 支持MathType和LaTeX公式 - 图片将自动上传至云存储 - 最大文件限制: 20MB在测试服务器部署验证后交付客户项目总结这个99元预算的项目通过合理的技术选型Spire.Office和定制开发实现了客户对Office内容导入的复杂需求。特别是对公式和形状的良好支持超出了客户的预期。整个开发过程历时5天主要时间花在了不同文档类型的兼容性处理上。复制插件说明此教程以CKEditor4.x为例使用其他编辑器的查看对应教程。将下列文件夹复制到项目中/WordPaster/ckeditor/plugins/imagepaster/ckeditor/plugins/netpaster/ckeditor/plugins/pptpaster/ckeditor/plugins/pdfimport上传插件上传插件文件夹将imagepaster,netpaster文件夹上传到现有项目ckeditor/plugins目录中在工具栏中增加插件按钮引用js初始化控件WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:,Cookie:PHPSESSID});//加载控件配置上传接口注意1.如果接口字段名称不是file请配置FileFieldName。ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch用于匹配JSON数据点击查看详细教程配置ImageUrl用于为图片增加域名前缀点击查看详细教程配置Session如果接口有权限验证登陆验证SESSION验证请配置COOKIE。或取消权限验证。参考点击查看详细教程说明1.请先测试您的接口点击查看详细教程功能演示编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例