CMS企业官网新闻编辑器插件开发日志2023年11月15日 需求分析与技术评估作为武汉的一名PHP全栈开发者我最近接手了一个CMS企业官网项目客户提出了一个关于新闻发布模块的增强需求。经过详细沟通我将需求整理如下核心需求点文档导入功能支持Word(.docx)、Excel(.xlsx)、PPT(.pptx)、PDF格式导入一键粘贴功能从Word直接复制粘贴内容到编辑器微信公众号内容导入支持从微信公众号文章复制内容格式保留要求图片(包括emz/wmz格式的公式图片)各种样式(字体、字号、颜色等)形状和形状组公式支持(Latex、MathType等)图片处理自动上传到阿里云OSS集成方式作为UEditor Plus插件形式技术评估过程1. 现有解决方案调研首先我调研了市面上常见的方案UEditor原生功能仅支持基本HTML粘贴复杂格式丢失严重开源的Docx导入插件如mammoth.js测试后发现对公式和特殊形状支持不足商业插件如Kindeditor的商业插件但价格远超预算(约5000元)PDF.js仅支持PDF渲染无法实现内容导入泽优WordPaster完全开源(下载源码)国产化适配全功能支持。2. 技术可行性分析经过测试发现主要技术难点在于Office文档解析需要完整解析.docx的XML结构特殊元素处理emz/wmz等公式图片需要特殊解码Latex支持需要在前端实现Latex渲染图片上传集成需要与现有OSS上传逻辑对接3. 成本与预算控制客户预算仅为99元这意味着无法购买商业授权需要寻找开源解决方案组合可能需要自行开发部分功能2023年11月16日 技术方案确定经过一天的研究我确定了如下技术方案前端方案核心解析库使用docx-preview处理Word文档公式支持Latex公式集成MathJaxMathType公式使用mammoth-math插件PPT/Excel支持使用SheetJS处理ExcelPPT暂时转为PDF处理PDF解析使用pdf.js后端方案文件接收PHP接收上传文件临时存储使用/tmp目录暂存上传文件OSS上传使用阿里云OSS PHP SDK插件架构设计UEditorPlus插件结构规划 ├── wordimport/ │ ├── button.png # 工具栏图标 │ ├── dialog.html # 上传对话框 │ ├── wordimport.js # 插件核心逻辑 │ ├── mathjax/ # MathJax集成 │ └── mammoth/ # docx解析库2023年11月17日 开发实施开发环境准备前端环境npminstalldocx-preview mathjax sheetjs pdf-lib --save-dev后端环境// composer.json{require:{aliyuncs/oss-sdk-php:^2.4}}插件开发过程1. 创建UEditor插件框架// wordimport.jsUE.registerUI(wordimport,function(editor,uiName){varbtnnewUE.ui.Button({name:uiName,title:导入Word/PDF,onclick:function(){// 打开上传对话框showImportDialog(editor);}});returnbtn;});functionshowImportDialog(editor){// 对话框HTML和逻辑}2. 实现Word文档解析asyncfunctionparseWordFile(file){constarrayBufferawaitfile.arrayBuffer();constresultawaitmammoth.extractRawText({arrayBuffer:arrayBuffer});// 处理图片constimagesresult.messages.filter(mm.typeimage);for(constimgofimages){constossUrlawaituploadToOSS(img.file);result.valueresult.value.replace(img.placeholder,);}// 处理公式result.valueprocessMathContent(result.value);returnresult.value;}3. PHP后端接收处理// ImportController.phppublicfunctionhandleUpload(){$file$_FILES[word_file];$tempPath$file[tmp_name];// 根据类型路由处理$extpathinfo($file[name],PATHINFO_EXTENSION);switch(strtolower($ext)){casedocx:$content$this-parseDocx($tempPath);break;casepdf:$content$this-parsePdf($tempPath);break;// 其他格式处理...}returnjson_encode([content$content]);}privatefunctionparseDocx($path){// 使用PHPWord库解析$phpWord\PhpOffice\PhpWord\IOFactory::load($path);$html;foreach($phpWord-getSections()as$section){foreach($section-getElements()as$element){if($elementinstanceof\PhpOffice\PhpWord\Element\TextRun){$html.$this-parseTextRun($element);}// 其他元素处理...}}return$html;}4. 图片上传OSS集成privatefunctionuploadImageToOSS($imageData){$ossClientnew\OSS\OssClient(config(oss.access_key_id),config(oss.access_key_secret),config(oss.endpoint));$objectNamenews/images/.uniqid()..png;try{$ossClient-putObject(config(oss.bucket),$objectName,$imageData);returnconfig(oss.cdn_domain)./.$objectName;}catch(OssException$e){Log::error(OSS上传失败: .$e-getMessage());returnfalse;}}2023年11月18日 测试与优化测试用例设计格式保留测试测试带复杂格式的Word文档导入测试包含MathType公式的文档测试带形状组合的PPT转换性能测试大文档(50页)导入测试高分辨率图片处理测试兼容性测试不同版本Office生成的文件测试微信公众号文章复制测试测试发现的问题emz/wmz公式显示问题原方案无法正确解析改为使用服务器端转换开发PHP服务端转换脚本publicfunctionconvertEmzToPng($emzData){$tempFiletempnam(sys_get_temp_dir(),emz);file_put_contents($tempFile,$emzData);// 使用ImageMagick转换exec(convert{$tempFile}png:-,$output);unlink($tempFile);returnimplode(\n,$output);}Latex公式渲染性能问题初始方案导致页面卡顿优化为懒加载方式functionrenderLatexLazily(){constobservernewIntersectionObserver((entries){entries.forEach(entry{if(entry.isIntersecting){MathJax.typeset([entry.target]);observer.unobserve(entry.target);}});});document.querySelectorAll(.latex).forEach(el{observer.observe(el);});}2023年11月19日 部署与交付部署流程前端部署npmrun buildcp-rdist/wordimport/ /var/www/html/static/plugins/后端部署上传PHP处理脚本到服务器配置Composer依赖设置OSS访问权限UEditor集成// 在UEditor配置中添加插件UE.registerUI(wordimport,function(editor,uiName){// ...插件代码});使用文档编写插件使用方法点击编辑器工具栏上的导入按钮选择要导入的文档或粘贴内容系统自动处理并显示在编辑器中注意事项Word文档建议使用.docx格式复杂公式可能需要额外调整单次导入建议不超过20MB项目总结成果在99元预算内实现了所有需求功能开发周期仅5天含测试支持了客户所有要求的文档格式特别优化了对高龄用户的易用性技术亮点混合解析方案结合前端和后端解析优势公式完整支持解决了emz/wmz和Latex的兼容问题无缝集成以插件形式实现不影响原有功能改进方向后续可增加版本比对功能考虑支持更多云存储平台优化大文档的处理性能这个项目让我深入理解了Office文档解析的复杂性也积累了处理特殊格式内容的宝贵经验。客户对最终效果非常满意特别是对高龄用户操作简化的设计给予了高度评价。复制插件目录引入插件文件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转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例
机械行业PLM系统如何通过umeditor控件实现三维模型截图上传？
CMS企业官网新闻编辑器插件开发日志2023年11月15日 需求分析与技术评估作为武汉的一名PHP全栈开发者我最近接手了一个CMS企业官网项目客户提出了一个关于新闻发布模块的增强需求。经过详细沟通我将需求整理如下核心需求点文档导入功能支持Word(.docx)、Excel(.xlsx)、PPT(.pptx)、PDF格式导入一键粘贴功能从Word直接复制粘贴内容到编辑器微信公众号内容导入支持从微信公众号文章复制内容格式保留要求图片(包括emz/wmz格式的公式图片)各种样式(字体、字号、颜色等)形状和形状组公式支持(Latex、MathType等)图片处理自动上传到阿里云OSS集成方式作为UEditor Plus插件形式技术评估过程1. 现有解决方案调研首先我调研了市面上常见的方案UEditor原生功能仅支持基本HTML粘贴复杂格式丢失严重开源的Docx导入插件如mammoth.js测试后发现对公式和特殊形状支持不足商业插件如Kindeditor的商业插件但价格远超预算(约5000元)PDF.js仅支持PDF渲染无法实现内容导入泽优WordPaster完全开源(下载源码)国产化适配全功能支持。2. 技术可行性分析经过测试发现主要技术难点在于Office文档解析需要完整解析.docx的XML结构特殊元素处理emz/wmz等公式图片需要特殊解码Latex支持需要在前端实现Latex渲染图片上传集成需要与现有OSS上传逻辑对接3. 成本与预算控制客户预算仅为99元这意味着无法购买商业授权需要寻找开源解决方案组合可能需要自行开发部分功能2023年11月16日 技术方案确定经过一天的研究我确定了如下技术方案前端方案核心解析库使用docx-preview处理Word文档公式支持Latex公式集成MathJaxMathType公式使用mammoth-math插件PPT/Excel支持使用SheetJS处理ExcelPPT暂时转为PDF处理PDF解析使用pdf.js后端方案文件接收PHP接收上传文件临时存储使用/tmp目录暂存上传文件OSS上传使用阿里云OSS PHP SDK插件架构设计UEditorPlus插件结构规划 ├── wordimport/ │ ├── button.png # 工具栏图标 │ ├── dialog.html # 上传对话框 │ ├── wordimport.js # 插件核心逻辑 │ ├── mathjax/ # MathJax集成 │ └── mammoth/ # docx解析库2023年11月17日 开发实施开发环境准备前端环境npminstalldocx-preview mathjax sheetjs pdf-lib --save-dev后端环境// composer.json{require:{aliyuncs/oss-sdk-php:^2.4}}插件开发过程1. 创建UEditor插件框架// wordimport.jsUE.registerUI(wordimport,function(editor,uiName){varbtnnewUE.ui.Button({name:uiName,title:导入Word/PDF,onclick:function(){// 打开上传对话框showImportDialog(editor);}});returnbtn;});functionshowImportDialog(editor){// 对话框HTML和逻辑}2. 实现Word文档解析asyncfunctionparseWordFile(file){constarrayBufferawaitfile.arrayBuffer();constresultawaitmammoth.extractRawText({arrayBuffer:arrayBuffer});// 处理图片constimagesresult.messages.filter(mm.typeimage);for(constimgofimages){constossUrlawaituploadToOSS(img.file);result.valueresult.value.replace(img.placeholder,);}// 处理公式result.valueprocessMathContent(result.value);returnresult.value;}3. PHP后端接收处理// ImportController.phppublicfunctionhandleUpload(){$file$_FILES[word_file];$tempPath$file[tmp_name];// 根据类型路由处理$extpathinfo($file[name],PATHINFO_EXTENSION);switch(strtolower($ext)){casedocx:$content$this-parseDocx($tempPath);break;casepdf:$content$this-parsePdf($tempPath);break;// 其他格式处理...}returnjson_encode([content$content]);}privatefunctionparseDocx($path){// 使用PHPWord库解析$phpWord\PhpOffice\PhpWord\IOFactory::load($path);$html;foreach($phpWord-getSections()as$section){foreach($section-getElements()as$element){if($elementinstanceof\PhpOffice\PhpWord\Element\TextRun){$html.$this-parseTextRun($element);}// 其他元素处理...}}return$html;}4. 图片上传OSS集成privatefunctionuploadImageToOSS($imageData){$ossClientnew\OSS\OssClient(config(oss.access_key_id),config(oss.access_key_secret),config(oss.endpoint));$objectNamenews/images/.uniqid()..png;try{$ossClient-putObject(config(oss.bucket),$objectName,$imageData);returnconfig(oss.cdn_domain)./.$objectName;}catch(OssException$e){Log::error(OSS上传失败: .$e-getMessage());returnfalse;}}2023年11月18日 测试与优化测试用例设计格式保留测试测试带复杂格式的Word文档导入测试包含MathType公式的文档测试带形状组合的PPT转换性能测试大文档(50页)导入测试高分辨率图片处理测试兼容性测试不同版本Office生成的文件测试微信公众号文章复制测试测试发现的问题emz/wmz公式显示问题原方案无法正确解析改为使用服务器端转换开发PHP服务端转换脚本publicfunctionconvertEmzToPng($emzData){$tempFiletempnam(sys_get_temp_dir(),emz);file_put_contents($tempFile,$emzData);// 使用ImageMagick转换exec(convert{$tempFile}png:-,$output);unlink($tempFile);returnimplode(\n,$output);}Latex公式渲染性能问题初始方案导致页面卡顿优化为懒加载方式functionrenderLatexLazily(){constobservernewIntersectionObserver((entries){entries.forEach(entry{if(entry.isIntersecting){MathJax.typeset([entry.target]);observer.unobserve(entry.target);}});});document.querySelectorAll(.latex).forEach(el{observer.observe(el);});}2023年11月19日 部署与交付部署流程前端部署npmrun buildcp-rdist/wordimport/ /var/www/html/static/plugins/后端部署上传PHP处理脚本到服务器配置Composer依赖设置OSS访问权限UEditor集成// 在UEditor配置中添加插件UE.registerUI(wordimport,function(editor,uiName){// ...插件代码});使用文档编写插件使用方法点击编辑器工具栏上的导入按钮选择要导入的文档或粘贴内容系统自动处理并显示在编辑器中注意事项Word文档建议使用.docx格式复杂公式可能需要额外调整单次导入建议不超过20MB项目总结成果在99元预算内实现了所有需求功能开发周期仅5天含测试支持了客户所有要求的文档格式特别优化了对高龄用户的易用性技术亮点混合解析方案结合前端和后端解析优势公式完整支持解决了emz/wmz和Latex的兼容问题无缝集成以插件形式实现不影响原有功能改进方向后续可增加版本比对功能考虑支持更多云存储平台优化大文档的处理性能这个项目让我深入理解了Office文档解析的复杂性也积累了处理特殊格式内容的宝贵经验。客户对最终效果非常满意特别是对高龄用户操作简化的设计给予了高度评价。复制插件目录引入插件文件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转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例
