CMS编辑器高级文档导入功能开发日志
1. 需求分析与技术调研
作为广东PHP开发团队的成员，我最近接手了一个企业CMS官网项目的升级任务。客户需要增强新闻发布功能，特别要求支持多种文档格式的直接导入和粘贴功能。
1.1 核心需求梳理
- 文档格式支持：Word(.doc/.docx)、Excel(.xls/.xlsx)、PPT(.ppt/.pptx)、PDF
- 特色功能要求：
- Word一键粘贴（保留格式）
- 微信公众号内容导入
- 保留复杂元素：图片、样式、公式(emz/wmz)、LaTeX、MathType、表格等
- 自动上传至华为云OBS
- 集成要求：CKEditor插件形式，不影响现有功能
1.2 现有解决方案评估
我调研了市面上常见的开源方案：
CKEditor插件库：
- Paste from Word：基础粘贴功能，但对复杂公式支持不足
- File Upload：简单文件上传，无法解析文档内容
开源库：
- PHPWord/PHPExcel：读写能力有限，不支持公式和复杂样式
- Spout：专注于数据表格处理
- Pandoc：命令行工具，服务器环境依赖复杂
商业解决方案：
- Office Online Server：微软方案，部署复杂
- OnlyOffice：功能完整但授权费用高
结论：现有方案无法满足emz/wmz公式和LaTeX支持需求，需定制开发。
2. 技术方案设计
2.1 系统架构
[前端CKEditor插件] → [PHP处理服务] → [文档解析引擎] → [格式转换模块] → [云存储上传] → [HTML生成]2.2 关键技术选型
文档解析：Apache POI (Java) + JodConverter
- 优点：对Office文档解析最全面
- 部署：通过PHP-Java Bridge调用
公式处理：
- MathType公式：Design Science提供的SDK
- LaTeX：MathJax库+自定义解析器
PDF处理：PDFBox + Apache Tika
图片处理：
- 云存储：华为OBS PHP SDK
- 格式转换：Imagick扩展
2.3 开发环境配置
# CentOS环境准备yuminstalljava-1.8.0-openjdk yuminstallImageMagick peclinstallimagick# PHP-Java Bridgewgethttps://netix.dl.sourceforge.net/project/php-java-bridge/Binary%20package/php-java-bridge_7.2.1/JavaBridgeTemplate621.warcpJavaBridgeTemplate621.war /var/lib/tomcat/webapps/3. 开发实现过程
3.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){// 创建模态窗口vardialog=editor.openDialog(CKEDITOR.getUrl(this.path+'dialogs/import.html'));}});}});3.2 PHP后端处理服务
DocParser.class.php核心结构：
classDocParser{private$obsClient;publicfunction__construct(){$this->obsClient=new\ObsClient(['key'=>OBS_ACCESS_KEY,'secret'=>OBS_SECRET_KEY,'endpoint'=>OBS_ENDPOINT]);}publicfunctionparseWord($filePath){// 调用Java服务处理文档$javaBridge=newJava('com.docparser.DocConverter');$htmlContent=$javaBridge->convertToHtml($filePath);// 处理图片上传$htmlContent=$this->processImages($htmlContent);return$htmlContent;}privatefunctionprocessImages($html){preg_match_all('/uploadBase64Image($imgData);$html=str_replace($imgData,$uploadUrl,$html);}}return$html;}}3.3 Java文档解析服务
DocConverter.java关键代码：
publicclassDocConverter{publicStringconvertToHtml(StringfilePath)throwsException{FileinputFile=newFile(filePath);Stringext=FilenameUtils.getExtension(inputFile.getName());switch(ext.toLowerCase()){case"doc":case"docx":returnconvertWordToHtml(inputFile);case"xls":case"xlsx":returnconvertExcelToHtml(inputFile);// 其他格式处理...}}privateStringconvertWordToHtml(Filefile)throwsException{XWPFDocumentdocument=newXWPFDocument(newFileInputStream(file));WordToHtmlConverterconverter=newWordToHtmlConverter(DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument());// 处理公式processEquations(document.getPackage());// 转换为HTMLStringWriterwriter=newStringWriter();Transformerserializer=TransformerFactory.newInstance().newTransformer();serializer.transform(newDOMSource(converter.getDocument()),newStreamResult(writer));returnwriter.toString();}}4. 测试与优化
4.1 测试案例设计
| 测试类型 | 测试内容 | 预期结果 |
|---|---|---|
| Word导入 | 带emz公式的docx | 公式正确显示 |
| 粘贴功能 | 从Word复制多列表格 | 表格结构完整 |
| Excel导入 | 带图表的工作簿 | 图表转为图片显示 |
| 样式保留 | 特殊字体和颜色 | 样式一致 |
| 性能测试 | 10MB以上文档 | 处理时间<15秒 |
4.2 性能优化
- 缓存机制：对已处理的文档内容建立hash缓存
- 异步处理：大文档采用队列异步处理
- 图片压缩：超过1MB的图片自动压缩
// 图片压缩处理$imagick=new\Imagick($tempFile);if($imagick->getImageLength()>1048576){$imagick->setImageCompressionQuality(70);$imagick->resizeImage($imagick->getImageWidth()/2,$imagick->getImageHeight()/2,\Imagick::FILTER_LANCZOS,1);}5. 部署方案
5.1 环境要求
服务器：
- Java 1.8+
- Tomcat 8+ (用于Java Bridge)
- PHP 7.4+ with Imagick扩展
目录结构：
/var/www/cms/ ├── plugins/ │ └── docimport/ # CKEditor插件 ├── lib/ │ └── DocParser/ # PHP处理库 └── java-services/ # Java解析服务5.2 集成步骤
- 将插件目录复制到CKEditor的plugins目录
- 在CKEditor配置中启用插件：
config.extraPlugins='docimport';config.toolbar=[['DocImport','...'],// 原有工具栏配置];- 配置Java Bridge连接参数：
// config.phpdefine('JAVA_HOSTS','127.0.0.1:8080');define('OBS_CONFIG',['key'=>'your-obs-key',// ...其他配置]);6. 项目总结
经过三周的开发与测试，我们成功实现了：
- 完整文档格式支持：满足客户所有文档类型需求
- 复杂元素保留：特别解决了emz/wmz公式的行业难题
- 无缝集成：插件化设计不影响现有系统
- 性能优化：10MB文档平均处理时间8.2秒
客户反馈：新功能显著提升了内容编辑效率，特别是对非技术人员非常友好，公式显示效果得到了技术部门的高度评价。
未来可考虑将这套解决方案产品化，为其他EmpireCMS用户提供增值服务。
下载插件包
解压
复制里面的目录e
覆盖到帝国CMS根目录
插件包自动覆盖下面目录
e/extend/WordPaster
注意：插件包包含ueditor，如果您已经集成了ueditor，您可以删除插件包的中ueditor
4.修改数据表字段
选择相应的模板表名
修改newstext字段
替换表单HTML代码
填入代码
varclassid='<?=$classid?>',infoid='<?=$id?>',filepass='<?=$filepass?>',ehash='<?=$ecms_hashur[ehref]?>',qiantai='<?=$qiantai?>';//把参数传给编辑器,增加支持7.2版本的金刚模式"name="">varpos=window.location.href.indexOf("/e/admin");varwebsite=window.location.href.substr(0,pos);WordPaster.getInstance({//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:website+"/e/extend/WordPaster/upload.php",//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:"",//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:"file",//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:'',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':'',//修改时候是信息ID'classid':'','qiantai':});});>关键字替换远程保存图片(加水印)远程保存FLASH(地址前缀：)图片链接转为下一页 自动分页,每 个字节为一页 取第张上传图为标题图片(缩略图:宽 ">*高 ">)填写授权码
在本地(localhost)中使用时不需要配置授权码。
在线上环境，正式环境（非localhost，非127.0.0.1）中使用时需要配置授权码。
整合效果
编辑器界面
导入Word文档,支持doc,docx
导入Excel文档,支持xls,xlsx
粘贴Word
一键粘贴Word内容，自动上传Word中的图片，保留文字样式。
Word转图片
一键导入Word文件，并将Word文件转换成图片上传到服务器中。
导入PDF
一键导入PDF文件，并将PDF转换成图片上传到服务器中。
导入PPT
一键导入PPT文件，并将PPT转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片
图片保存的路径
示例下载
下载完整示例
