核心内容摘要
LangChain DeepAgents 速通指南（二）—— Summarization中间件为Agent作记忆加减法
企业网站Word粘贴和导入功能开发全记录需求分析与技术评估作为福建某软件公司的前端工程师我最近接到一个企业网站后台管理系统的功能升级需求。
客户希望在现有的KindEditor编辑器中增加Word粘贴和文档导入功能同时支持微信公众号内容粘贴并自动处理图片上传。
详细需求梳理Word粘贴功能直接复制Word内容粘贴到编辑器图片自动上传到服务器文档导入功能支持Word/Excel/PPT/PDF导入保留复杂文档样式微信公众号粘贴自动下载公众号图片并上传技术规范前端Vue2 CLI KindEditor插件后端ASP.NET WebForm存储阿里云OSS未来可扩展多云存储预算2万元以内技术方案调研方案一基于Mammoth.js的纯前端方案优点轻量级纯JavaScript实现可直接在浏览器中解析Word文档(.docx)开源免费缺点对复杂格式支持有限无法处理Excel/PPT/PDF图片处理需要额外开发方案二使用docx4j/documents4j的后端处理方案优点Java/.NET生态成熟支持复杂文档格式可处理多种文档类型缺点需要服务器资源集成复杂度高性能开销较大方案三商用SDK方案如TX Text Control、Aspose优点功能全面支持所有需求提供现成API和文档技术支持有保障缺点授权费用较高基础版约$1000可能需要额外服务器资源最终方案选择基于预算限制和技术评估决定采用混合方案Word粘贴前端使用Mammoth.js 自定义粘贴处理器文档导入后端使用Aspose.Total for .NET提供30天试用商用授权约$5000但可谈判按需付费图片上传统一使用阿里云OSS SDK开发实施过程前端实现KindEditor插件开发// kindeditor-wordpaste-plugin.jsKindEditor.plugin(wordpaste,function(K){vareditorthis;varnamewordpaste;// 添加工具栏按钮editor.clickToolbar(name,function(){// 创建文件上传输入框varinputdocument.createElement(input);input.typefile;input.accept.docx,.doc,.xlsx,.pptx,.pdf;input.onchangefunction(e){varfilee.target.files[0];if(!file)return;// 上传文件到后端处理varformDatanewFormData();formData.append(file,file);fetch(/api/document/import,{method:POST,body:formData}).then(responseresponse.json()).then(data{if(data.html){editor.insertHtml(data.html);}});};input.click();});// 处理Word粘贴editor.afterCreate(function(){this.edit.area.addEventListener(paste,function(e){// 检测Word内容if(e.clipboardData.types.indexOf(Files)-
{handlePaste(e,editor);e.preventDefault();}});});functionhandlePaste(e,editor){// 处理Word粘贴逻辑// ...}});后端实现ASP.NET WebForm处理程序// DocumentImportHandler.ashxpublicclassDocumentImportHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;try{HttpPostedFilefilecontext.Request.Files[file];if(filenull||file.ContentLength
{thrownewException(No file uploaded);}stringfileExtPath.GetExtension(file.FileName).ToLower();stringhtmlContent;// 使用Aspose处理不同文档类型switch(fileExt){case.doc:case.docx:htmlContentProcessWordDocument(file.InputStream);break;case.xlsx:htmlContentProcessExcelDocument(file.InputStream);break;case.pptx:htmlContentProcessPowerPointDocument(file.InputStream);break;case.pdf:htmlContentProcessPdfDocument(file.InputStream);break;default:thrownewException(Unsupported file type);}// 处理HTML中的图片上传htmlContentUploadImagesInHtml(htmlContent);context.Response.Write(JsonConvert.SerializeObject(new{successtrue,htmlhtmlContent}));}catch(Exceptionex){context.Response.Write(JsonConvert.SerializeObject(new{successfalse,messageex.Message}));}}privatestringProcessWordDocument(Streamstream){// 使用Aspose.Words处理Word文档Aspose.Words.DocumentdocnewAspose.Words.Document(stream);returndoc.ToString(SaveFormat.Html);}privatestringUploadImagesInHtml(stringhtml){// 使用正则表达式查找并替换图片varregexnewRegex(]src\(?[^\])\);returnregex.Replace(html,match{stringimgSrcmatch.Groups[src].Value;if(imgSrc.StartsWith(data:)){// 处理base64图片stringnewUrlUploadBase64Image(imgSrc);returnmatch.Value.Replace(imgSrc,newUrl);}elseif(imgSrc.StartsWith(http)){// 下载网络图片并上传stringnewUrlDownloadAndUploadImage(imgSrc);returnmatch.Value.Replace(imgSrc,newUrl);}returnmatch.Value;});}privatestringUploadBase64Image(stringbase64Data){// 上传到阿里云OSS// ...}privatestringDownloadAndUploadImage(stringimageUrl){// 下载并上传图片// ...}}图片上传服务实现// AliyunOSSService.cspublicclassAliyunOSSService{privatereadonlystring_accessKeyId;privatereadonlystring_accessKeySecret;privatereadonlystring_endpoint;privatereadonlystring_bucketName;publicAliyunOSSService(stringaccessKeyId,stringaccessKeySecret,stringendpoint,stringbucketName){_accessKeyIdaccessKeyId;_accessKeySecretaccessKeySecret;_endpointendpoint;_bucketNamebucketName;}publicstringUploadFile(Streamstream,stringfileName){varclientnewOssClient(_endpoint,_accessKeyId,_accessKeySecret);stringobjectName$uploads/{DateTime.Now:yyyyMMdd}/{Guid.NewGuid()}{Path.GetExtension(fileName)};varputObjectRequestnewPutObjectRequest(_bucketName,objectName,stream);client.PutObject(putObjectRequest);return$https://{_bucketName}.{_endpoint}/{objectName};}publicstringUploadBase64Image(stringbase64Data){varpartsbase64Data.Split(,);varbytesConvert.FromBase64String(parts[1]);stringextensionparts[0].Split(/)[1].Split(;)[0];stringfileName${Guid.NewGuid()}.{extension};using(varstreamnewMemoryStream(bytes)){returnUploadFile(stream,fileName);}}publicstringDownloadAndUploadImage(stringimageUrl){using(varhttpClientnewHttpClient()){varresponsehttpClient.GetAsync(imageUrl).Result;varstreamresponse.Content.ReadAsStreamAsync().Result;stringfileNameimageUrl.Split(/).Last();returnUploadFile(stream,fileName);}}}集成与部署前端集成将插件文件放入KindEditor的plugins目录修改KindEditor初始化配置KindEditor.create(#editor,{plugins:[wordpaste],items:[source,|,wordpaste,|,undo,redo,|,preview]});后端部署安装Aspose.Total for .NET NuGet包配置阿里云OSS访问密钥部署处理程序到IIS测试与优化测试用例Word粘贴测试从Word复制包含图片、表格的内容粘贴到编辑器验证图片上传和样式保留文档导入测试上传复杂格式Word文档验证公式、形状等特殊元素的保留微信公众号粘贴测试复制公众号文章内容粘贴到编辑器验证图片自动下载上传性能优化图片上传优化实现图片压缩后再上传使用CDN加速图片访问文档处理优化引入队列处理大文档实现后台异步处理预算控制项目费用估算Aspose.Total for .NET授权5000 (按需付费)开发人力成本12000 (10人天)阿里云OSS存储费用500/年应急预算2500总计20000后续升级计划多云存储支持抽象存储接口支持华为云OBS、腾讯云COS等文档预览功能集成Office Online Server实现文档预览协同编辑升级到支持多人协同的编辑器此方案在预算范围内满足了客户需求同时考虑了未来扩展性。
通过混合使用开源库和商业SDK平衡了功能完整性与开发成本。
上传工具栏插件文件夹上传插件文件夹控件初始化在head中引入组件文件注意不要重复引入jquery如果您的页面已经引入了jquery这里就不要再引入jquery
4了。
WordPaster For KindEditor-
x # 初始化组件 WordPaster.getInstance({ui:{render:wdpst}//目标容器一般为div});设置快捷键将插件添加到工具栏并挂载KindEditor的CtrlV快捷键事件vareditor;KindEditor.ready(function(K){editorK.create(#content1,{items:[wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf,|],afterCreate:function(){WordPaster.getInstance().SetEditor(this);varselfthis;//自定义 Ctrl V 事件。
KindEditor.ctrl(self.edit.doc,V,function(){WordPaster.getInstance().Paste();});}});});注意
如果接口字段名称不是file请配置FileFieldName。
点击查看教程
如果接口返回JSON请配置ImageMatch点击查看教程
如果接口返回的图片地址没有域名请配置ImageUrl点击查看教程整合效果效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。
Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。
导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。
导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。
上传网络图片示例下载下载完整示例