核心内容摘要
妈妈的“秘密武器”：为何她坚持让儿子戴上它？
CMS编辑器高级文档导入功能开发日志
需求分析与技术调研作为广东PHP开发团队的成员我最近接手了一个企业CMS官网项目的升级任务。
客户需要增强新闻发布功能特别要求支持多种文档格式的直接导入和粘贴功能。
1 核心需求梳理文档格式支持Word(.doc/.docx)、Excel(.xls/.xlsx)、PPT(.ppt/.pptx)、PDF特色功能要求Word一键粘贴保留格式微信公众号内容导入保留复杂元素图片、样式、公式(emz/wmz)、LaTeX、MathType、表格等自动上传至华为云OBS集成要求CKEditor插件形式不影响现有功能
2 现有解决方案评估我调研了市面上常见的开源方案CKEditor插件库Paste from Word基础粘贴功能但对复杂公式支持不足File Upload简单文件上传无法解析文档内容开源库PHPWord/PHPExcel读写能力有限不支持公式和复杂样式Spout专注于数据表格处理Pandoc命令行工具服务器环境依赖复杂商业解决方案Office Online Server微软方案部署复杂OnlyOffice功能完整但授权费用高结论现有方案无法满足emz/wmz公式和LaTeX支持需求需定制开发。
技术方案设计
1 系统架构[前端CKEditor插件] → [PHP处理服务] → [文档解析引擎] → [格式转换模块] → [云存储上传] → [HTML生成]
2
关键技术选型文档解析Apache POI (Java) JodConverter优点对Office文档解析最全面部署通过PHP-Java Bridge调用公式处理MathType公式Design Science提供的SDKLaTeXMathJax库自定义解析器PDF处理PDFBox Apache Tika图片处理云存储华为OBS PHP SDK格式转换Imagick扩展
3 开发环境配置# CentOS环境准备yuminstalljava-
1.
0-openjdk yuminstallImageMagick peclinstallimagick# PHP-Java Bridgewgethttps://netix.dl.sourceforge.net/project/php-java-bridge/Binary%20package/php-java-bridge_
7.
1/JavaBridgeTemplate
warcpJavaBridgeTemplate
war /var/lib/tomcat/webapps/
开发实现过程
1 CKEditor插件开发plugin.js核心代码CKEDITOR.plugins.add(docimport,{icons:docimport,init:function(editor){editor.ui.addButton(DocImport,{label:导入文档,command:importDoc,toolbar:insert});editor.addCommand(importDoc,{exec:function(editor){// 创建模态窗口vardialogeditor.openDialog(CKEDITOR.getUrl(this.pathdialogs/import.html));}});}});
2 PHP后端处理服务DocParser.class.php核心结构classDocParser{private$obsClient;publicfunction__construct(){$this-obsClientnew\ObsClient([keyOBS_ACCESS_KEY,secretOBS_SECRET_KEY,endpointOBS_ENDPOINT]);}publicfunctionparseWord($filePath){// 调用Java服务处理文档$javaBridgenewJava(com.docparser.DocConverter);$htmlContent$javaBridge-convertToHtml($filePath);// 处理图片上传$htmlContent$this-processImages($htmlContent);return$htmlContent;}privatefunctionprocessImages($html){preg_match_all(/uploadBase64Image($imgData);$htmlstr_replace($imgData,$uploadUrl,$html);}}return$html;}}
3 Java文档解析服务DocConverter.java关键代码publicclassDocConverter{publicStringconvertToHtml(StringfilePath)throwsException{FileinputFilenewFile(filePath);StringextFilenameUtils.getExtension(inputFile.getName());switch(ext.toLowerCase()){casedoc:casedocx:returnconvertWordToHtml(inputFile);casexls:casexlsx:returnconvertExcelToHtml(inputFile);// 其他格式处理...}}privateStringconvertWordToHtml(Filefile)throwsException{XWPFDocumentdocumentnewXWPFDocument(newFileInputStream(file));WordToHtmlConverterconverternewWordToHtmlConverter(DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument());// 处理公式processEquations(document.getPackage());// 转换为HTMLStringWriterwriternewStringWriter();TransformerserializerTransformerFactory.newInstance().newTransformer();serializer.transform(newDOMSource(converter.getDocument()),newStreamResult(writer));returnwriter.toString();}}
测试与优化
1 测试案例设计测试类型测试内容预期结果Word导入带emz公式的docx公式正确显示粘贴功能从Word复制多列表格表格结构完整Excel导入带图表的工作簿图表转为图片显示样式保留特殊字体和颜色样式一致性能测试10MB以上文档处理时间15秒
2 性能优化缓存机制对已处理的文档内容建立hash缓存异步处理大文档采用队列异步处理图片压缩超过1MB的图片自动压缩// 图片压缩处理$imagicknew\Imagick($tempFile);if($imagick-getImageLength()
{$imagick-setImageCompressionQuality(
;$imagick-resizeImage($imagick-getImageWidth()/2,$imagick-getImageHeight()/2,\Imagick::FILTER_LANCZOS,
;}
部署方案
1 环境要求服务器Java
8Tomcat 8 (用于Java Bridge)PHP
4 with Imagick扩展目录结构/var/www/cms/ ├── plugins/ │ └── docimport/ # CKEditor插件 ├── lib/ │ └── DocParser/ # PHP处理库 └── java-services/ # Java解析服务
2 集成步骤将插件目录复制到CKEditor的plugins目录在CKEditor配置中启用插件config.extraPluginsdocimport;config.toolbar[[DocImport,...],// 原有工具栏配置];配置Java Bridge连接参数// config.phpdefine(JAVA_HOSTS,
127.
0.
1:
;define(OBS_CONFIG,[keyyour-obs-key,// ...其他配置]);
项目
总结经过三周的开发与测试我们成功实现了完整文档格式支持满足客户所有文档类型需求复杂元素保留特别解决了emz/wmz公式的行业难题无缝集成插件化设计不影响现有系统性能优化10MB文档平均处理时间
2秒客户反馈新功能显著提升了内容编辑效率特别是对非技术人员非常友好公式显示效果得到了技术部门的高度评价。
未来可考虑将这套解决方案产品化为其他EmpireCMS用户提供增值服务。
下载插件包解压复制里面的目录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转换成图片上传到服务器中。
上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片图片保存的路径示例下载下载完整示例