核心内容摘要
16岁的入场券
CMS企业官网Word文档导入功能开发记录需求分析作为浙江的一名PHP开发者我最近接手了一个帝国CMS企业官网的外包项目。
客户提出了一个关键需求在后台新闻管理系统的文章发布模块中增加Word/Excel/PPT/PDF文档导入和一键粘贴功能。
这个需求的
核心价值在于提高内容发布效率简化操作流程为高龄用户提供更友好的操作体验支持复杂文档格式的完美导入包括公式、形状、样式等保持与现有系统架构的兼容性技术调研过程现有解决方案评估经过对市场上主流开源产品的评估我发现以下问题公式支持不足大多数方案对emz/wmz格式的公式图片和形状支持不佳LaTeX/MathType兼容性差很少有方案能完整支持数学公式的导入样式保留不完整字体、颜色、表格等格式经常丢失集成复杂度高很多方案需要大量二次开发技术选型基于评估结果我决定采用以下技术组合编辑器插件基于CKEditor的PasteFromWord插件进行二次开发文档解析使用PHPWord PhpSpreadsheet TCPDF组合处理不同格式公式转换MathJax MathType SDK处理公式转换图片处理Intervention Image库 华为云OBS SDK前端组件Vue.js Axios实现异步上传开发实施过程环境准备首先我在本地开发环境中搭建了与生产环境一致的系统# 开发环境配置OS: CentOS
9PHP:
7.
33 MySQL:
5.
41 Web Server: Nginx
1.
2
1插件架构设计设计了一个模块化的插件架构empirecms-word-import/ ├── config/ # 插件配置 ├── controller/ # 控制器 ├── helper/ # 辅助函数 ├── library/ # 第三方库 │ ├── PHPWord/ │ ├── PhpSpreadsheet/ │ └── ... ├── model/ # 数据模型 ├── static/ # 静态资源 │ ├── css/ │ ├── js/ │ └── images/ ├── view/ # 视图模板 └── plugin.xml # 插件元数据核心功能实现
Word一键粘贴功能// 在CKEditor配置中添加PasteFromWord插件CKEDITOR.replace(editor,{extraPlugins:pastefromword,pasteFromWordPromptCleanup:true,pasteFromWordRemoveFontStyles:false,pasteFromWordRemoveStyles:false});
文档导入功能// 文档导入控制器publicfunctionimportDocumentAction(){$file$this-getRequest()-getFile(document);$extstrtolower(pathinfo($file[name],PATHINFO_EXTENSION));switch($ext){casedocx:$content$this-importWord($file[tmp_name]);break;casexlsx:$content$this-importExcel($file[tmp_name]);break;casepptx:$content$this-importPowerPoint($file[tmp_name]);break;casepdf:$content$this-importPDF($file[tmp_name]);break;default:thrownewException(不支持的文档格式);}// 处理图片上传$content$this-processImages($content);return$content;}
公式处理// 前端公式渲染functionrenderFormulas(content){// 识别LaTeX公式contentcontent.replace(/\$\$(.*?)\$\$/g,function(match,formula){returnformula;});// 识别MathType公式contentcontent.replace(/]*data-math-typeformula[^]*/g,function(imgTag){varformula$(imgTag).data(formula);returnformula;});// 初始化MathJaxif(window.MathJax){MathJax.typeset();}returncontent;}
图片上传处理// 图片上传到华为云OBSprotectedfunctionuploadToOBS($imageData,$fileName){$obsClientnewObsClient([keyconfig(obs.access_key),secretconfig(obs.secret_key),endpointconfig(obs.endpoint)]);$objectKeyuploads/.date(Ymd)./.$fileName;try{$result$obsClient-putObject([Bucketconfig(obs.bucket),Key$objectKey,Body$imageData,ACLObsClient::AclPublicRead]);return$result[ObjectURL];}catch(ObsException$e){thrownewException(图片上传失败: .$e-getMessage());}}帝国CMS集成在帝国CMS中集成插件的主要步骤在e/admin/ecmseditor/infoeditor/ckeditor/plugins/目录下创建插件文件夹修改config.js添加插件配置在e/admin/ecmseditor/infoeditor/ckeditor/ckeditor.js中注册新按钮创建后台管理菜单项测试与优化测试用例Word文档导入测试包含复杂表格、图片、公式的文档样式保留情况检查大文档(10MB)导入性能一键粘贴测试从Word直接复制内容从微信公众号复制内容保留格式检查公式支持测试LaTeX公式渲染MathType公式转换化学方程式显示性能优化针对大文档处理进行了以下优化引入分块处理机制避免内存溢出使用Redis缓存解析结果图片上传采用异步队列// 分块处理大文档publicfunctionprocessLargeDocument($filePath){$chunkSize1024*1024;// 1MB$readernew\PhpOffice\PhpWord\Reader\Word2007();$sections$reader-loadSections($filePath,$chunkSize);$content;foreach($sectionsas$section){$content.$this-processSection($section);unset($section);// 及时释放内存}return$content;}部署方案提供了两种部署方式标准部署将插件包复制到指定目录执行SQL脚本创建必要的数据表修改配置文件Docker部署FROM centos:7 RUN yum install -y php php-mysql php-gd php-xml COPY empirecms-word-import /var/www/html/plugins/word-import EXPOSE 80 CMD [/usr/sbin/httpd, -D, FOREGROUND]用户文档编写了详细的用户手册包括快速开始指南
常见问题解答格式支持矩阵性能优化建议项目
总结这个项目实现了客户的所有需求主要成果包括开发了一个完整的Word文档导入插件实现了复杂公式的完美支持与帝国CMS无缝集成提供了详细的文档和支持通过这个项目我深入掌握了CKEditor插件开发和文档处理技术为未来类似项目积累了宝贵经验。
下载插件包解压复制里面的目录e覆盖到帝国CMS根目录插件包自动覆盖下面目录e/extend/WordPaster注意插件包包含ueditor如果您已经集成了ueditor您可以删除插件包的中ueditor
修改数据表字段选择相应的模板表名修改newstext字段替换表单HTML代码填入代码varclassid?$classid?,infoid?$id?,filepass?$filepass?,ehash?$ecms_hashur[ehref]?,qiantai?$qiantai?;//把参数传给编辑器,增加支持
2版本的金刚模式namevarposwindow.location.href.indexOf(/e/admin);varwebsitewindow.location.href.substr(0,pos);WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:website/e/extend/WordPaster/upload.php,//为图片地址增加域名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:,ui:{render:wdpst}});//加载控件UE.getEditor(,{serverUrl:e/extend/ueditor/php/controller.php,//自己的请求接口toolbars:Default,//工具栏配置文件具体参考ueditor.toolbarconfig.js文件中说明pageBreakTag:,//帝国分页标签initialFrameWidth:100%,//编辑器宽initialFrameHeight:300//编辑器高//等等其它配置自行添加参考UE默认配置文件复制修改即可});//自定义请求参数.ready(function(){.execCommand(serverparam,{filepass:,//修改时候是信息IDclassid:,qiantai:});}); 关键字替换 远程保存图片( 加水印) 远程保存FLASH(地址前缀 ) 图片链接转为下一页 自动分页 ,每 个字节为一页 取第 张上传图为标题图片( 缩略图: 宽 *高 )填写授权码在本地(localhost)中使用时不需要配置授权码。
在线上环境正式环境非localhost非
127.
0.
1中使用时需要配置授权码。
整合效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。
Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。
导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。
导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。
上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片图片保存的路径示例下载下载完整示例