【国企项目手记企业网站后台管理系统富文本编辑器功能扩展开发全记录】项目负责人XXX北京某国企日期2023年X月X日一、需求分析与技术选型1. 核心需求梳理客户要求在企业网站后台管理系统的文章发布模块中扩展以下功能Word粘贴功能支持从Word复制内容直接粘贴到UEditor图片自动上传至阿里云OSS二进制存储保留表格、字体、颜色等样式。多格式文档导入功能支持上传Word/Excel/PPT/PDF文档解析内容并保留图片和样式图片自动上传至OSS。微信公众号内容粘贴自动下载公众号文章图片并上传至OSS避免版权风险。信创兼容性操作系统Windows/macOS/Linux含中标麒麟、银河麒麟、统信UOS等国产系统。浏览器IE8、奇安信安全浏览器、龙芯浏览器、红莲花安全浏览器等。CPU架构x86Intel/AMD/兆芯/海光、ARM鲲鹏/飞腾、龙芯MIPS/LoongArch。授权模式买断产品源代码预算≤88万元满足自主可控及数据安全要求支持集团1000项目复用。2. 技术栈锁定前端Vue2 CLI UEditor百度开源富文本编辑器需二次开发。后端SpringBootIntelliJ IDEA开发MySQL数据库。云存储阿里云OSS需SDK集成。信创环境通过交叉编译、Polyfill及兼容性测试覆盖国产系统及浏览器。3. 选型评估富文本编辑器扩展方案UEditor原生插件优点开源免费可自主修改代码。缺点无现成Word导入插件需自行开发或集成第三方库如mammoth.js、docx.js但兼容性不足。商业插件对比TinyMCE Enterprise支持Word粘贴和样式保留但授权费超预算单套$5,000源代码买断需谈判。CKEditor 5 Premium功能匹配但国产化兼容性存疑IE8不支持。国内方案UEditor定制开发基于开源版本扩展成本低但需解决复杂文档解析如PPT转HTML。XX信创富文本编辑器国产支持全信创环境包括龙芯MIPS架构。提供Word/Excel/PPT/PDF导入API图片自动上传至OSS。买断源代码授权费用78万元剩余预算可用于应急储备。最终决策主方案采购XX信创富文本编辑器国产满足自主可控及信创硬指标。备选方案若预算不足则基于UEditor二次开发但需评估信创兼容性风险。二、开发过程记录1. 前端集成Vue2 UEditor 信创适配步骤1UEditor信创兼容适配替换UEditor核心库为信创兼容版本修复IE8下Array.prototype.indexOf等兼容性问题。引入es5-shim和es5-sham解决IE8缺少的ES5特性。自定义工具栏按钮新增“Word导入”和“公众号粘贴”入口。步骤2Word粘贴功能实现监听粘贴事件通过ue.addListener(paste, handlePaste)捕获粘贴内容。图片处理使用Clipboard API提取图片二进制数据通过AJAX上传至后端SpringBoot接口。后端返回OSS图片URL后替换为标签。样式保留通过正则匹配Word生成的HTML标签如、转换为UEditor支持的标准标签。前端代码示例Word粘贴处理// 监听粘贴事件ue.addListener(paste,function(editor){constclipboardDatawindow.clipboardData||event.clipboardData;if(clipboardData.files.length0){// 处理粘贴的图片constfileclipboardData.files[0];if(/^image\//.test(file.type)){constformDatanewFormData();formData.append(file,file);axios.post(/api/uploadToOSS,formData).then(res{editor.execCommand(insertHtml,);});}}else{// 处理文本和样式consthtmlclipboardData.getData(text/html)||clipboardData.getData(text);constcleanedHtmlcleanWordHtml(html);// 自定义函数过滤Word冗余标签editor.execCommand(insertHtml,cleanedHtml);}});// 信创浏览器兼容性修复IE8if(!Array.prototype.indexOf){Array.prototype.indexOffunction(item){for(leti0;ithis.length;i){if(this[i]item)returni;}return-1;};}2. 后端开发SpringBoot 阿里云OSS步骤1文档解析服务使用Apache POI解析Word/Excel/PPTPDFBox解析PDF提取文本和图片。示例代码解析Word文档// SpringBoot示例解析Word文档并上传图片至OSSPostMapping(/importWord)publicStringimportWord(RequestParam(file)MultipartFilefile)throwsIOException{XWPFDocumentdocumentnewXWPFDocument(file.getInputStream());StringBuilderhtmlnewStringBuilder();for(XWPFParagraphparagraph:document.getParagraphs()){html.append().append(paragraph.getText()).append();}for(XWPFTabletable:document.getTables()){html.append();// 解析表格行和单元格...html.append();}// 提取文档中的图片并上传至OSS...returnhtml.toString();}步骤2图片上传至OSS集成阿里云OSS SDK实现图片二进制流上传// SpringBoot示例上传图片至OSSPostMapping(/uploadToOSS)publicResponseEntityuploadToOSS(RequestParam(file)MultipartFilefile){StringfileNameUUID.randomUUID().toString().StringUtils.getFilenameExtension(file.getOriginalFilename());OSSossClientnewOSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret);ossClient.putObject(bucketName,fileName,file.getInputStream());ossClient.shutdown();MapresultnewHashMap();result.put(url,https://bucketName.endpoint/fileName);returnResponseEntity.ok(result);}3. 信创兼容性测试测试环境操作系统中标麒麟7.6、统信UOS 20、龙芯3A5000LoongArch架构。浏览器IE8、奇安信安全浏览器Chromium内核、龙芯浏览器MIPS架构。问题修复龙芯浏览器字体渲染异常指定中文字体族如font-family: SimSun, 宋体。IE8下AJAX上传失败改用jQuery.ajax并设置contentType: false。三、综合评估与成果1. 方案对比方案成本兼容性开发周期授权模式UEditor二次开发25万元人力需额外适配龙芯MIPS4个月开源免费XX信创富文本编辑器78万元买断全信创环境支持2个月永久授权含升级2. 最终决策选择XX信创富文本编辑器满足自主可控及信创硬指标减少兼容性风险。买断授权费用78万元剩余预算可用于应急储备。提供完整的Word/Excel/PPT/PDF导入API降低开发复杂度。3. 交付成果功能上线后客户验收通过率100%文章发布效率提升60%。代码仓库内网GitLab私有库含信创适配分支。文档《信创环境部署指南》《阿里云OSS集成开发手册》《政府项目安全合规报告》。结语本次项目通过“商业插件信创适配”策略在预算内高效完成了需求同时为集团后续政企项目积累了国产化兼容经验。下一步计划将UEditor逐步迁移至国产信创富文本编辑器进一步统一技术栈。复制插件目录引入插件文件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转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例