核心内容摘要
UNIT-00赋能微信小程序开发：AI客服与内容生成功能集成教程
日期2023年X月X日角色北京XX软件公司 全栈开发工程师项目背景客户要求在后台管理系统的文章发布模块新增三大功能Word粘贴功能支持从Word复制内容粘贴到UEditor图片自动上传至内网单据存储服务器未来可迁移至阿里云/华为云等对象存储保留样式字体、字号、颜色等。
文档导入功能支持上传Word/Excel/PPT/PDF解析内容并保留图片和样式渲染至UEditor。
微信公众号内容粘贴支持从微信公众号编辑器复制内容含富文本和图片并粘贴到UEditor图片自动上传至内网服务器。
技术栈前端Vue2-cli UEditor富文本编辑器后端SpringBootJava数据库Oracle存储文章元数据图片路径存储在文件系统或对象存储服务器内网私有部署未来支持多云对象存储
技术可行性分析与工具选型
Word粘贴功能核心问题浏览器原生粘贴事件无法直接处理Word中的复杂样式如mso-前缀的CSS和图片图片以base64或剪贴板对象形式存在。
UEditor默认会过滤Word特有的HTML标签和样式需自定义过滤规则。
图片需从base64转换为文件并上传至内网服务器生成可访问的URL。
解决方案前端拦截粘贴事件提取HTML和图片base64数据。
使用axios将图片上传至后端替换HTML中的base64为服务器URL。
调整UEditor配置保留Word相关CSS属性如font-family、color。
后端SpringBoot提供图片上传接口将图片保存至内网服务器返回访问路径。
支持未来迁移至对象存储如阿里云OSS通过配置切换存储服务。
工具评估mammoth.js轻量级Word转HTML库但无法处理图片和复杂样式。
docx-preview纯前端解析Word但与UEditor集成复杂。
自定义方案基于UEditor的afterPaste钩子结合SpringBoot图片上传接口实现。
结论采用自定义方案前端处理粘贴事件后端提供图片上传服务。
文档导入功能核心问题需支持多种格式Word/Excel/PPT/PDF并保留样式和图片。
大文件如PPT解析性能优化避免阻塞主线程。
图片需从文档中提取并上传至服务器。
解决方案后端SpringBootWord/Excel/PPT使用Apache POI或Aspose商业库解析文档提取文本、图片和样式。
PDF使用Apache PDFBox或iText解析文本图片需额外处理。
图片上传至内网服务器生成URL替换文档中的本地路径。
前端通过文件上传组件如el-upload将文档发送至后端。
后端返回解析后的HTML注入UEditor。
工具评估Apache POI开源免费但解析复杂格式如PPT需额外开发。
Aspose功能强大支持所有格式但需商业授权。
PDFBox开源PDF解析库但样式保留能力有限。
结论Word/Excel使用Apache POI开源优先。
PPT/PDF评估Aspose试用版或结合LibreOffice命令行转换需服务器安装。
微信公众号内容粘贴核心问题微信公众号编辑器导出的HTML可能包含微信特有的CSS类名如wx_fmt_*。
图片以微信CDN链接形式存在需下载并上传至内网服务器。
解决方案前端拦截粘贴事件提取HTML中的微信图片URL。
通过后端接口下载图片并上传至内网服务器替换HTML中的CDN链接。
后端提供图片下载接口支持从微信CDN拉取图片并保存至本地。
工具评估JsoupJava解析HTML并提取图片URL。
HttpClientSpringBoot下载微信图片。
结论自定义实现前端处理HTML替换后端提供下载服务。
开发过程记录
Word粘贴功能实现前端Vue2 UEditor// 监听UEditor粘贴事件consteditorUE.getEditor(editor);editor.addListener(afterPaste,function(){consthtmleditor.getContent();if(html.includes(mso-)||html.includes(data:image)){handleWordPaste(html);}});asyncfunctionhandleWordPaste(html){// 提取base64图片并上传constimgTagshtml.match(/]srcdata:image[^]/g)||[];for(constimgTagofimgTags){constbase64imgTag.match(/srcdata:image([^;]);base64,([^])/);if(base
{constresponseawaituploadToServer(base64[2],base64[1]);// 调用后端接口constnewImgTagimgTag.replace(base64[0],src${response.url});htmlhtml.replace(imgTag,newImgTag);}}editor.setContent(html);// 更新编辑器内容}后端SpringBootRestControllerRequestMapping(/api/upload)publicclassUploadController{Value(${file.upload-dir})// 内网服务器路径privateStringuploadDir;PostMapping(/word-image)publicResponseEntityuploadWordImage(RequestParam(image)Stringbase64,RequestParam(type)Stringtype){StringfileNameUUID.randomUUID().type;StringfilePathuploadDir/fileName;// 解码base64并写入文件byte[]decodedBytesBase
getDecoder().decode(base
;Files.write(Paths.get(filePath),decodedBytes);// 返回内网可访问的URL需配置Nginx反向代理Stringurlhttp://内网服务器地址/uploads/fileName;returnResponseEntity.ok(Map.of(url,url));}}
文档导入功能实现后端SpringBoot Apache POI// Word导入示例DOCXPostMapping(/import/docx)publicResponseEntityimportDocx(RequestParam(file)MultipartFilefile)throwsIOException{XWPFDocumentdocumentnewXWPFDocument(file.getInputStream());StringBuilderhtmlnewStringBuilder();for(XWPFParagraphparagraph:document.getParagraphs()){html.append();for(XWPFRunrun:paragraph.getRuns()){html.append().append(run.getText(
).append();}html.append();}// 提取图片并上传简化示例for(XWPFPictureDatapicture:document.getAllPictures()){byte[]bytespicture.getData();// 上传至服务器并替换HTML中的图片路径}returnResponseEntity.ok(html.toString());}前端Vue2文件上传export default { methods: { handleImportSuccess(response) { const editor UE.getEditor(editor); editor.setContent(response); // 注入解析后的HTML } } };
微信公众号内容粘贴实现前端Vue2asyncfunctionhandleWechatPaste(html){// 提取微信图片URL示例srchttps://mmbiz.qpic.cn/...)constimgTagshtml.match(/]srchttps:\/\/mmbiz\.qpic\.cn[^]/g)||[];for(constimgTagofimgTags){consturlimgTag.match(/src([^])/)[1];constresponseawaitdownloadFromWechat(url);// 调用后端接口constnewImgTagimgTag.replace(url,response.url);htmlhtml.replace(imgTag,newImgTag);}consteditorUE.getEditor(editor);editor.setContent(html);}后端SpringBootPostMapping(/download/wechat-image)publicResponseEntitydownloadWechatImage(RequestParam(url)Stringurl)throwsIOException{// 使用HttpClient下载图片HttpEntityentitynewHttpEntity(headers);ResponseEntityresponserestTemplate.exchange(url,HttpMethod.GET,entity,byte[].class);// 保存至内网服务器StringfileNameUUID.randomUUID().jpg;StringfilePathuploadDir/fileName;Files.write(Paths.get(filePath),response.getBody());// 返回内网URLStringaccessibleUrlhttp://内网服务器地址/uploads/fileName;returnResponseEntity.ok(Map.of(url,accessibleUrl));}
问题与优化性能问题大文件解析如PPT采用异步任务队列如RabbitMQ优化。
样式兼容性Word中的复杂样式如文本框需手动转换为HTML/CSS。
安全性对上传文件进行MIME类型校验防止恶意文件上传。
多云支持封装存储服务接口如StorageService未来可替换为阿里云/华为云实现。
四、
总结通过结合UEditor的扩展能力、SpringBoot的文件处理能力和Apache POI的文档解析能力成功实现了客户需求。
后续计划将文档解析服务拆分为独立微服务并完善多云对象存储的适配层。
复制插件目录引入插件文件UEditor
1.
4.
3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-
4在工具栏中增加插件按钮//工具栏上的所有的功能按钮和下拉框可以在new编辑器的实例时选择自己需要的重新定义toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos
,asp/upload.asp].join();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:});//加载控件注意如果接口字段名称不是file请配置FileFieldName。
ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch匹配图片地址如果服务器返回的是JSON则需要通过正则匹配ImageMatch:,点击参考链接配置ImageUrl为图片地址增加域名如果服务器返回的图片地址是相对路径可通过此属性添加自定义域名。
ImageUrl:,点击查看详细教程配置SESSION如果接口有权限验证登陆验证SESSION验证请配置COOKIE。
或取消权限验证。
参考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。
Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。
导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。
导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。
上传网络图片下载示例点击下载完整示例