项目需求分析与技术选型记录广东某集团公司项目负责人2023年X月X日一、需求拆解与核心目标客户提出在现有企业网站后台管理系统的文章发布模块中增加以下功能Word粘贴功能支持从Word复制内容后粘贴到CKEditor 4编辑器图片自动上传至华为云OBS二进制存储保留表格、字体、颜色等样式。Word/Excel/PPT/PDF导入功能支持上传文档后解析内容图片自动上传至OBS保留原始样式。微信公众号内容粘贴自动下载公众号文章中的图片并上传至OBS保留排版。信创兼容性支持国产操作系统中标麒麟、银河麒麟、统信UOS等和CPU架构x86、ARM、龙芯。授权模式一次性买断预算≤58万元覆盖后续1000客户项目。二、技术选型与产品评估1. 编辑器插件方案CKEditor 4插件扩展CKEditor 4原生支持pasteFromWord插件但存在以下问题图片以Base64嵌入不符合需求需二进制存储。对Excel/PPT/PDF支持有限。信创环境兼容性未知。第三方商业插件评估TinyMCE PowerPaste功能强大但授权费高单套约$1500买断需谈判。Froala Editor样式保留优秀但国产化支持不足。国内方案如UEditor信创适配需二次开发成本不可控。最终选择采用CKEditor 4 自定义插件开发结合以下技术栈前端Vue2 CKEditor 4通过iframe隔离兼容信创浏览器。后端SpringBoot Huawei Cloud OBS SDK支持多云存储抽象层。文档解析Word/Excel/PPTApache POIJava版兼容信创JVM如麒麟JDK。PDFiText 7需处理中文授权问题改用开源PDFBox。微信公众号Jsoup抓取HTML 正则提取图片URL。2. 信创兼容性验证操作系统测试环境统信UOS桌面版 麒麟V10服务器版。依赖项OpenJDK 11、Nginx国产版、MySQL 8信创版。CPU架构x86Intel/AMD无问题。ARM鲲鹏920通过华为云鲲鹏兼容列表验证。龙芯LoongArch需使用龙芯JDK和适配版CKEditor。三、开发过程记录1. 前端实现Vue2 CKEditor 4插件开发扩展CKEditor的paste事件拦截Word内容并提取图片// src/plugins/wordpaste/plugin.jsCKEDITOR.plugins.add(wordpaste,{init:function(editor){editor.on(paste,function(evt){consthtmlevt.data.dataValue;constimageshtml.match(/]src([^])/g)||[];images.forEach(imgTag{constsrcimgTag.match(/src([^])/)[1];if(src.startsWith(data:image)){// 提取Base64并上传至后端constbase64src.split(,)[1];uploadToOBS(base64).then(url{constnewImgTagimgTag.replace(src,url);evt.data.dataValueevt.data.dataValue.replace(imgTag,newImgTag);});}});});}});工具栏集成在CKEditor配置中添加自定义按钮// src/components/Editor.vueconfig:{extraPlugins:wordpaste,toolbar:[{name:clipboard,items:[PasteFromWord,WordPaste]}// 自定义按钮]}2. 后端实现SpringBoot OBS SDK图片上传接口接收前端Base64图片并存储至OBS// src/main/java/com/example/controller/UploadController.javaPostMapping(/upload)publicResponseEntityuploadImage(RequestParam(file)Stringbase64){byte[]bytesBase64.decodeBase64(base64.split(,)[1]);StringobjectKeyimages/UUID.randomUUID().jpg;OBSClientclientnewOBSClient(ak,sk,endpoint);client.putObject(bucketName,objectKey,newByteArrayInputStream(bytes));client.close();returnResponseEntity.ok(https://obs.example.com/objectKey);}文档解析服务使用Apache POI解析Word表格样式// src/main/java/com/example/service/DocParser.javapublicStringparseWord(MultipartFilefile)throwsIOException{XWPFDocumentdocnewXWPFDocument(file.getInputStream());StringBuilderhtmlnewStringBuilder();doc.getTables().forEach(table-{table.getRows().forEach(row-{html.append();row.getTableCells().forEach(cell-{Stringstylecell.getCTTc().getTcPr().getShd().getFill();// 背景色html.append(String.format(,style,cell.getText()));});html.append();});});html.append(%s);returnhtml.toString();}3. 信创适配优化JVM参数调整在application.properties中指定麒麟JDK的字体路径java.awt.fonts/usr/share/fonts/win/浏览器兼容强制CKEditor使用iframe模式以避免国产浏览器渲染问题config:{iframe:true,skin:moono-lisa// 兼容低版本Linux桌面}四、综合评估与成本项目方案成本万元商业插件授权TinyMCE买断5年45自定义开发人力成本3人×2月×2.5万/月15信创测试麒麟/统信UOS兼容性认证3总计58最终决策选择自定义开发原因如下商业插件无法完全满足信创和二进制存储需求。一次性买断成本接近预算上限且后续扩展性受限。自定义方案可复用至其他政府项目长期ROI更高。五、后续计划压力测试模拟1000并发用户上传文档。多云支持抽象OBS SDK为接口未来无缝切换阿里云/AWS。信创认证提交麒麟/统信UOS官方兼容性证书申请。记录人XXX广东某集团公司项目部复制插件说明此教程以CKEditor4.x为例使用其他编辑器的查看对应教程。将下列文件夹复制到项目中/WordPaster/ckeditor/plugins/imagepaster/ckeditor/plugins/netpaster/ckeditor/plugins/pptpaster/ckeditor/plugins/pdfimport上传插件上传插件文件夹将imagepaster,netpaster文件夹上传到现有项目ckeditor/plugins目录中在工具栏中增加插件按钮引用js初始化控件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:,Cookie:PHPSESSID});//加载控件配置上传接口注意1.如果接口字段名称不是file请配置FileFieldName。ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch用于匹配JSON数据点击查看详细教程配置ImageUrl用于为图片增加域名前缀点击查看详细教程配置Session如果接口有权限验证登陆验证SESSION验证请配置COOKIE。或取消权限验证。参考点击查看详细教程说明1.请先测试您的接口点击查看详细教程功能演示编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例