CMS新闻管理系统Word图片转存开发日志 2023年X月X日 - 寻找解决方案作为一名大三的码农今天我要给我的CMS新闻管理系统添加一个超实用的功能Word内容一键粘贴并自动上传图片这绝对能让编辑小姐姐们开心到飞起~需求分析清单:✔️ Word内容粘贴保留样式✔️ 图片自动上传到阿里云OSS✔️ 支持Latex公式→MathML转换✔️ 多终端高清公式显示✔️ Office全家桶(Word/Excel/PPT/PDF)导入✔️ 预算99元(穷学生的呐喊)️♂️ 技术调研过程方案1: UEditor插件扩展首先扒了扒UEditor官方文档发现它有Word粘贴功能但图片处理很基础…代码尝试:// UEditor配置修改UE.registerUI(wordpaste,function(editor){varbtnnewUE.ui.Button({name:wordpaste,title:粘贴Word内容,onclick:function(){editor.execCommand(pasteword);}});returnbtn;});但问题来了图片还是base64格式没有自动上传功能方案2: 开源库集成发现两个宝藏项目mammoth.js- 免费开源Word转HTML库MathJax- 公式渲染神器集成测试:// mammoth.js基础使用mammoth.extractRawText({arrayBuffer:wordFile}).then(function(result){varhtmlresult.value;// 转换后的HTML// 这里需要添加图片上传逻辑...}).done();预算有限先试试免费方案 开发实战前端改造(Vue2 UEditor)export default { methods: { async handleWordImport(e) { const file e.target.files[0]; const arrayBuffer await file.arrayBuffer(); // 使用mammoth转换 const result await mammoth.convertToHtml({arrayBuffer}); // 图片处理 let html await this.processImages(result.value); // 插入编辑器 this.editor.setContent(html); }, async processImages(html) { // 正则匹配图片 const imgRegex /img[^]srcdata:image[^][^]*/g; // 替换base64为上传后的URL // 这里需要实现上传逻辑... } } }后端PHP处理(图片上传部分)// 图片上传接口publicfunctionuploadImage(){$file$_FILES[file];$extpathinfo($file[name],PATHINFO_EXTENSION);$filenamemd5(time().rand(1000,9999))...$ext;// 阿里云OSS SDK$ossClientnewOSS\OssClient(config(oss.access_key_id),config(oss.access_key_secret),config(oss.endpoint));try{$result$ossClient-uploadFile(config(oss.bucket),uploads/.$filename,$file[tmp_name]);returnjson_encode([url$result[info][url]]);}catch(OssException$e){returnjson_encode([error$e-getMessage()]);}} 遇到的坑样式丢失问题Word的复杂表格粘贴后惨不忍睹解决方案添加CSS样式补丁.ueditor-table{border-collapse:collapse;width:100%;}公式转换问题Latex→MathML的转换精度不够最终选择了MathJax 3.0真香性能问题大文档处理卡顿添加了Web Worker多线程处理 成果展示经过两周的爆肝(和无数杯咖啡☕)终于实现了一键粘贴Word内容(样式保留度90%)图片自动上传到OSS公式完美渲染总花费0元(全靠开源精神) 加入我们的技术群想获取完整源码或者一起交流开发经验 QQ群223813913 群福利新人红包1-99元随机掉落定期分享开源项目内推机会(师兄师姐都在大厂)组队接单搞副业“一个人可以走得很快但一群人可以走得更远” —— 某位不愿透露姓名的程序员 待优化清单Excel/PPT支持(正在研究SheetJS)PDF解析(预算充足了考虑PDF.js)移动端适配优化完整项目地址GitHub链接 (Star一下鼓励学生党吧~)PS这份开发日志如果能帮到你请给我发个666我会在群里发红包哦~ 复制插件目录引入插件文件UEditor 1.4.3.3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-1.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,pos1),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转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例