化工集团网站建设 中企动力jmr119色带

化工集团网站建设 中企动力,jmr119色带,和凡科网类似的网站,网站营销外包公司简介深圳XX保险集团OA系统新闻模块升级项目实施记录 #xff08;基于信创环境的Vue2TinyMCESpringBoot集成方案#xff09; 一、项目背景与需求分析 现状梳理 集团OA系统新闻模块采用Vue2-cli前端框架#xff0c;后端为SpringBoot 2.7.x#xff0c;编辑器使用TinyMCE 5.x。当前…深圳XX保险集团OA系统新闻模块升级项目实施记录基于信创环境的Vue2TinyMCESpringBoot集成方案一、项目背景与需求分析现状梳理集团OA系统新闻模块采用Vue2-cli前端框架后端为SpringBoot 2.7.x编辑器使用TinyMCE 5.x。当前仅支持基础文本编辑Word文档需手动复制内容并逐张上传图片效率低下且样式丢失严重如表格、字体、段落间距。核心需求功能升级实现Word文档一键导入自动解析文本、图片、表格等元素图片上传至服务器并生成可访问URL保留原格式。信创兼容支持国产操作系统麒麟V10、统信UOS、数据库达梦DM8、OceanBase、中间件东方通TongWeb 7.0。服务保障提供7×24小时在线技术支持确保金融级系统稳定性SLA≥99.95%。二、技术选型与产品评估1. 前端编辑器扩展方案方案优势劣势适配性评估TinyMCE官方插件原生支持Vue2集成可通过tinymce/tinymce-vue组件快速调用提供基础粘贴过滤功能需二次开发实现图片自动上传与复杂样式保留核心候选方案第三方插件如Mammoth.js专注Word解析能保留大部分样式如标题、列表图片处理需额外开发社区支持较弱需结合TinyMCE使用复杂度高商业解决方案如CKEditor 5高级版功能完整支持Word一键导入图片云存储提供信创认证版本授权费用高约15万元/年需替换现有编辑器迁移成本大暂不考虑开源方案WordPaster功能完整支持Word一键导入Word一键粘贴提供信创认证版本完全开放产品源代码意向方案结论选择TinyMCE官方插件自定义开发通过拦截粘贴事件paste触发Word解析流程。2. 后端服务选型文件处理使用Apache POI解析.docx文件提取文本、图片、元数据。图片存储对接集团现有MinIO对象存储兼容信创环境生成带签名的临时URL供前端访问。信创中间件适配在东方通TongWeb中配置JVM参数-Xms512m -Xmx2048m优化内存泄漏问题。三、开发实施过程1. 前端实现Vue2TinyMCE步骤1集成TinyMCE编辑器// main.jsimportTinymceVuefromtinymce/tinymce-vue;Vue.component(tinymce-editor,TinymceVue);// 配置支持粘贴上传的插件consttinymceInit{plugins:paste image,toolbar:paste | undo redo | styleselect | bold italic,paste_preprocess:(plugin,args){if(isWordContent(args.content)){handleWordPaste(args.content);// 触发自定义解析逻辑}},images_upload_handler:(blobInfo,success){uploadImageToServer(blobInfo.blob()).then(urlsuccess(url));}};步骤2Word内容解析与图片上传// utils/wordParser.jsexportasyncfunctionparseWordContent(wordBlob){constreadernewFileReader();reader.onloadasync(e){constarrayBuffere.target.result;constdocnewXWPFDocument(arrayBuffer);// Apache POI解析consthtmlconvertDocToHtml(doc);// 提取文本样式constimagesextractImages(doc);// 提取图片Base64awaituploadImages(images);// 批量上传至MinIOreturnhtml.replace(/{{IMAGE_PLACEHOLDER}}/g,imageUrls);};reader.readAsArrayBuffer(wordBlob);}2. 后端实现SpringBoot步骤1图片上传接口RestControllerRequestMapping(/api/oa/news)publicclassNewsController{AutowiredprivateMinioClientminioClient;PostMapping(/upload-image)publicResponseEntityuploadImage(RequestParam(file)MultipartFilefile){StringobjectNameoa-news-images/UUID.randomUUID().png;minioClient.putObject(PutObjectArgs.builder().bucket(xx-insurance).object(objectName).stream(file.getInputStream(),file.getSize(),-1).contentType(file.getContentType()).build());returnResponseEntity.ok(https://minio.xxinsurance.com/objectName);}}步骤2Word文档解析服务ServicepublicclassWordParserService{publicStringparseDocxToHtml(MultipartFilefile)throwsIOException{XWPFDocumentdocumentnewXWPFDocument(file.getInputStream());StringBuilderhtmlnewStringBuilder();for(XWPFParagraphparagraph:document.getParagraphs()){html.append().append(paragraph.getText()).append();}// 处理表格、图片等复杂元素...html.append();returnhtml.toString();}}3. 信创环境适配数据库兼容将JPA的GeneratedValue策略改为GenerationType.IDENTITY适配达梦DM8的自增主键。字体渲染在服务器部署中文字体包如思源黑体、方正仿宋避免Word导入后显示方框。安全加固对上传的Word文件进行病毒扫描集成麒麟系统自带的杀毒API。四、测试与部署1. 测试用例测试类型测试场景预期结果功能测试导入含表格、图片的Word文档表格结构完整图片可正常显示兼容性测试在麒麟V10统信UOS双系统下操作编辑器加载时间3秒无样式错乱性能测试同时上传10个5MB的Word文件服务器CPU占用率≤70%响应时间5秒安全测试上传恶意脚本文件.docx系统拦截并记录日志返回403错误2. 部署方案内网环境使用Kubernetes集群部署通过Nginx Ingress实现蓝绿发布。外网访问通过集团SD-WAN网络加密传输限制IP访问权限仅允许内网IP分支机构IP。五、技术支持与运维保障服务承诺提供7×24小时企业微信/电话支持紧急问题1小时内响应。每月出具《系统健康度报告》包含性能趋势、安全漏洞扫描结果。知识转移编制《信创环境下Vue2TinyMCE开发指南》包含常见问题如字体丢失、表格错位的解决方案。对集团IT团队进行3次现场培训每次2小时覆盖日志分析、性能调优、灾备演练。六、项目成果效率提升新闻发布时间从平均1.5小时缩短至20分钟含Word导入审核。信创认证通过国家工业信息安全发展研究中心认证证书编号CII-2023-XXXXXX。成本节约相比商业解决方案节省授权费用约18万元/年。附录完整代码库地址[GitLab私有仓库链接]测试报告[PDF文档链接]技术支持联系方式企业微信群「XX保险OA升级支持组」 | 紧急电话0755-XXXXXXX记录人XX保险集团信息技术部日期2025年XX月XX日复制插件安装jquerynpm install jquery在组件中引入// 引入tinymce-vueimportEditorfromtinymce/tinymce-vueimport{WordPaster}from../../static/WordPaster/js/wimport{zyOffice}from../../static/zyOffice/js/oimport{zyCapture}from../../static/zyCapture/z添加工具栏//添加导入excel工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1function(editor){editor.ui.registry.addButton(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(excelimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加word转图片工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1function(editor){editor.ui.registry.addButton(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(importwordtoimg,function(editor){Buttons.register(editor);});}Plugin();}());//添加粘贴网络图片工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1function(editor){editor.ui.registry.addButton(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(netpaster,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入PDF按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1function(editor){editor.ui.registry.addButton(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pdfimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入PPT按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1function(editor){editor.ui.registry.addButton(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pptimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入WORD按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1function(editor){editor.ui.registry.addButton(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加WORD粘贴按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);varicohttp://localhost:8080/static/WordPaster/plugin/word.pngfunctionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1function(editor){editor.ui.registry.addButton(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordpaster,function(editor){Buttons.register(editor);});}Plugin();}());在线代码添加插件// 插件plugins:{type:[String,Array],// default: advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualcharsdefault:autoresize code autolink autosave image imagetools paste preview table powertables},点击查看在线代码初始化组件// 初始化WordPaster.getInstance({// 上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,// 为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},// 设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,// 提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:})在页面中引入组件功能演示编辑器在编辑器中增加功能按钮导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片。下载示例点击下载完整示例