化工集團網(wǎng)站建設(shè) 中企動力,jmr119色帶,和凡科網(wǎng)類似的網(wǎng)站,網(wǎng)站營銷外包公司簡介深圳XX保險集團OA系統(tǒng)新聞模塊升級項目實施記錄 #xff08;基于信創(chuàng)環(huán)境的Vue2TinyMCESpringBoot集成方案#xff09; 一、項目背景與需求分析 現(xiàn)狀梳理 集團OA系統(tǒng)新聞模塊采用Vue2-cli前端框架#xff0c;后端為SpringBoot 2.7.x#xff0c;編輯器使用TinyMCE 5.x。當前…深圳XX保險集團OA系統(tǒng)新聞模塊升級項目實施記錄基于信創(chuàng)環(huán)境的Vue2TinyMCESpringBoot集成方案一、項目背景與需求分析現(xiàn)狀梳理集團OA系統(tǒng)新聞模塊采用Vue2-cli前端框架后端為SpringBoot 2.7.x編輯器使用TinyMCE 5.x。當前僅支持基礎(chǔ)文本編輯Word文檔需手動復制內(nèi)容并逐張上傳圖片效率低下且樣式丟失嚴重如表格、字體、段落間距。核心需求功能升級實現(xiàn)Word文檔一鍵導入自動解析文本、圖片、表格等元素圖片上傳至服務(wù)器并生成可訪問URL保留原格式。信創(chuàng)兼容支持國產(chǎn)操作系統(tǒng)麒麟V10、統(tǒng)信UOS、數(shù)據(jù)庫達夢DM8、OceanBase、中間件東方通TongWeb 7.0。服務(wù)保障提供7×24小時在線技術(shù)支持確保金融級系統(tǒng)穩(wěn)定性SLA≥99.95%。二、技術(shù)選型與產(chǎn)品評估1. 前端編輯器擴展方案方案優(yōu)勢劣勢適配性評估TinyMCE官方插件原生支持Vue2集成可通過tinymce/tinymce-vue組件快速調(diào)用提供基礎(chǔ)粘貼過濾功能需二次開發(fā)實現(xiàn)圖片自動上傳與復雜樣式保留核心候選方案第三方插件如Mammoth.js專注Word解析能保留大部分樣式如標題、列表圖片處理需額外開發(fā)社區(qū)支持較弱需結(jié)合TinyMCE使用復雜度高商業(yè)解決方案如CKEditor 5高級版功能完整支持Word一鍵導入圖片云存儲提供信創(chuàng)認證版本授權(quán)費用高約15萬元/年需替換現(xiàn)有編輯器遷移成本大暫不考慮開源方案WordPaster功能完整支持Word一鍵導入Word一鍵粘貼提供信創(chuàng)認證版本完全開放產(chǎn)品源代碼意向方案結(jié)論選擇TinyMCE官方插件自定義開發(fā)通過攔截粘貼事件paste觸發(fā)Word解析流程。2. 后端服務(wù)選型文件處理使用Apache POI解析.docx文件提取文本、圖片、元數(shù)據(jù)。圖片存儲對接集團現(xiàn)有MinIO對象存儲兼容信創(chuàng)環(huán)境生成帶簽名的臨時URL供前端訪問。信創(chuàng)中間件適配在東方通TongWeb中配置JVM參數(shù)-Xms512m -Xmx2048m優(yōu)化內(nèi)存泄漏問題。三、開發(fā)實施過程1. 前端實現(xiàn)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);// 觸發(fā)自定義解析邏輯}},images_upload_handler:(blobInfo,success){uploadImageToServer(blobInfo.blob()).then(urlsuccess(url));}};步驟2Word內(nèi)容解析與圖片上傳// 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. 后端實現(xiàn)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文檔解析服務(wù)ServicepublicclassWordParserService{publicStringparseDocxToHtml(MultipartFilefile)throwsIOException{XWPFDocumentdocumentnewXWPFDocument(file.getInputStream());StringBuilderhtmlnewStringBuilder();for(XWPFParagraphparagraph:document.getParagraphs()){html.append().append(paragraph.getText()).append();}// 處理表格、圖片等復雜元素...html.append();returnhtml.toString();}}3. 信創(chuàng)環(huán)境適配數(shù)據(jù)庫兼容將JPA的GeneratedValue策略改為GenerationType.IDENTITY適配達夢DM8的自增主鍵。字體渲染在服務(wù)器部署中文字體包如思源黑體、方正仿宋避免Word導入后顯示方框。安全加固對上傳的Word文件進行病毒掃描集成麒麟系統(tǒng)自帶的殺毒API。四、測試與部署1. 測試用例測試類型測試場景預期結(jié)果功能測試導入含表格、圖片的Word文檔表格結(jié)構(gòu)完整圖片可正常顯示兼容性測試在麒麟V10統(tǒng)信UOS雙系統(tǒng)下操作編輯器加載時間3秒無樣式錯亂性能測試同時上傳10個5MB的Word文件服務(wù)器CPU占用率≤70%響應(yīng)時間5秒安全測試上傳惡意腳本文件.docx系統(tǒng)攔截并記錄日志返回403錯誤2. 部署方案內(nèi)網(wǎng)環(huán)境使用Kubernetes集群部署通過Nginx Ingress實現(xiàn)藍綠發(fā)布。外網(wǎng)訪問通過集團SD-WAN網(wǎng)絡(luò)加密傳輸限制IP訪問權(quán)限僅允許內(nèi)網(wǎng)IP分支機構(gòu)IP。五、技術(shù)支持與運維保障服務(wù)承諾提供7×24小時企業(yè)微信/電話支持緊急問題1小時內(nèi)響應(yīng)。每月出具《系統(tǒng)健康度報告》包含性能趨勢、安全漏洞掃描結(jié)果。知識轉(zhuǎn)移編制《信創(chuàng)環(huán)境下Vue2TinyMCE開發(fā)指南》包含常見問題如字體丟失、表格錯位的解決方案。對集團IT團隊進行3次現(xiàn)場培訓每次2小時覆蓋日志分析、性能調(diào)優(yōu)、災(zāi)備演練。六、項目成果效率提升新聞發(fā)布時間從平均1.5小時縮短至20分鐘含Word導入審核。信創(chuàng)認證通過國家工業(yè)信息安全發(fā)展研究中心認證證書編號CII-2023-XXXXXX。成本節(jié)約相比商業(yè)解決方案節(jié)省授權(quán)費用約18萬元/年。附錄完整代碼庫地址[GitLab私有倉庫鏈接]測試報告[PDF文檔鏈接]技術(shù)支持聯(lián)系方式企業(yè)微信群「XX保險OA升級支持組」 | 緊急電話0755-XXXXXXX記錄人XX保險集團信息技術(shù)部日期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轉(zhuǎn)圖片工具欄按鈕(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轉(zhuǎn)圖片,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(importwordtoimg,{text:,tooltip:Word轉(zhuǎn)圖片,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(importwordtoimg,function(editor){Buttons.register(editor);});}Plugin();}());//添加粘貼網(wǎng)絡(luò)圖片工具欄按鈕(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:網(wǎng)絡(luò)圖片一鍵上傳,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(netpaster,{text:,tooltip:網(wǎng)絡(luò)圖片一鍵上傳,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},// 設(shè)置文件字段名稱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內(nèi)容自動上傳Word中的圖片保留文字樣式。Word轉(zhuǎn)圖片一鍵導入Word文件并將Word文件轉(zhuǎn)換成圖片上傳到服務(wù)器中。導入PDF一鍵導入PDF文件并將PDF轉(zhuǎn)換成圖片上傳到服務(wù)器中。導入PPT一鍵導入PPT文件并將PPT轉(zhuǎn)換成圖片上傳到服務(wù)器中。上傳網(wǎng)絡(luò)圖片一鍵自動上傳網(wǎng)絡(luò)圖片。下載示例點擊下載完整示例