当前位置： 首页 > news >正文

TinyMCE导入word图片自动压缩尺寸

news 2026/7/12 8:23:47

深圳XX保险集团OA系统新闻模块升级项目实施记录
（基于信创环境的Vue2+TinyMCE+SpringBoot集成方案）

一、项目背景与需求分析

  1. 现状梳理

    • 集团OA系统新闻模块采用Vue2-cli前端框架，后端为SpringBoot 2.7.x，编辑器使用TinyMCE 5.x。
    • 当前仅支持基础文本编辑，Word文档需手动复制内容并逐张上传图片，效率低下且样式丢失严重（如表格、字体、段落间距）。

  2. 核心需求

    • 功能升级：实现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. 前端实现（Vue2+TinyMCE）

  • 步骤1：集成TinyMCE编辑器

    // main.jsimportTinymceVuefrom'@tinymce/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(url=>success(url));}};

  • 步骤2：Word内容解析与图片上传

    // utils/wordParser.jsexportasyncfunctionparseWordContent(wordBlob){constreader=newFileReader();reader.onload=async(e)=>{constarrayBuffer=e.target.result;constdoc=newXWPFDocument(arrayBuffer);// Apache POI解析consthtml=convertDocToHtml(doc);// 提取文本+样式constimages=extractImages(doc);// 提取图片Base64awaituploadImages(images);// 批量上传至MinIOreturnhtml.replace(/{{IMAGE_PLACEHOLDER}}/g,imageUrls);};reader.readAsArrayBuffer(wordBlob);}
2. 后端实现（SpringBoot）

  • 步骤1：图片上传接口

    @RestController@RequestMapping("/api/oa/news")publicclassNewsController{@AutowiredprivateMinioClientminioClient;@PostMapping("/upload-image")publicResponseEntityuploadImage(@RequestParam("file")MultipartFilefile){StringobjectName="oa-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);}}

  • 步骤2：Word文档解析服务

    @ServicepublicclassWordParserService{publicStringparseDocxToHtml(MultipartFilefile)throwsIOException{XWPFDocumentdocument=newXWPFDocument(file.getInputStream());StringBuilderhtml=newStringBuilder("");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）。

五、技术支持与运维保障

  1. 服务承诺

    • 提供7×24小时企业微信/电话支持，紧急问题1小时内响应。
    • 每月出具《系统健康度报告》，包含性能趋势、安全漏洞扫描结果。

  2. 知识转移

    • 编制《信创环境下Vue2+TinyMCE开发指南》，包含常见问题（如字体丢失、表格错位）的解决方案。
    • 对集团IT团队进行3次现场培训（每次2小时），覆盖日志分析、性能调优、灾备演练。

六、项目成果

  • 效率提升：新闻发布时间从平均1.5小时缩短至20分钟（含Word导入+审核）。
  • 信创认证：通过国家工业信息安全发展研究中心认证（证书编号：CII-2023-XXXXXX）。
  • 成本节约：相比商业解决方案，节省授权费用约18万元/年。

附录：

  • 完整代码库地址：[GitLab私有仓库链接]
  • 测试报告：[PDF文档链接]
  • 技术支持联系方式：企业微信群「XX保险OA升级支持组」 | 紧急电话：0755-XXXXXXX

记录人：XX保险集团信息技术部
日期：2025年XX月XX日

复制插件

安装jquery

npm install jquery

在组件中引入

// 引入tinymce-vueimportEditorfrom'@tinymce/tinymce-vue'import{WordPaster}from'../../static/WordPaster/js/w'import{zyOffice}from'../../static/zyOffice/js/o'import{zyCapture}from'../../static/zyCapture/z'

添加工具栏

//添加导入excel工具栏按钮(function(){'use strict';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');varico="http://localhost:8080/static/WordPaster/plugin/word.png"functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1=function(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 visualchars'default:'autoresize code autolink autosave image imagetools paste preview table powertables'},

点击查看在线代码

初始化组件

// 初始化WordPaster.getInstance({// 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:'http://localhost:8891/upload.aspx',// 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:'http://localhost:8891{url}',// 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:'file',// 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''})

在页面中引入组件

功能演示
编辑器
在编辑器中增加功能按钮
导入Word文档,支持doc,docx
导入Excel文档,支持xls,xlsx
粘贴Word
一键粘贴Word内容，自动上传Word中的图片，保留文字样式。
Word转图片
一键导入Word文件，并将Word文件转换成图片上传到服务器中。
导入PDF
一键导入PDF文件，并将PDF转换成图片上传到服务器中。
导入PPT
一键导入PPT文件，并将PPT转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片。
下载示例
点击下载完整示例





http://www.cnnetsun.cn/news/37412.html






相关文章：


  • 
软件测试（2）：白盒测试

    • 

  • 
ComfyUI与Auto1111 WebUI对比：谁更适合你的项目？

    • 

  • 
终极指南：VQ-Diffusion高效图像生成模型完全解析

    • 

  • 
8、音频与视频的奇妙玩法

    • 

  • 
从新手到技术专家：软件开发知识的系统化学习路径

    • 

  • 
4、树莓派音频使用全攻略

    • 

  • 
初解神经网络优化算法

    • 

  • 
Linux shell 进阶教程：单引号会禁止变量展开

    • 

  • 
如何让AI工作流真正理解你的业务场景？

    • 

  • 
如何快速安装Sionna：面向新手的完整配置教程

    • 

  • 
SketchUp STL插件实战手册：从建模到3D打印的完整流程

    • 

  • 
零基础玩转AI音乐风格识别：Magenta实战指南

    • 

  • 
零基础玩转智能配色：Color Thief色彩提取实战指南

    • 

  • 
64K上下文新标杆：LongAlign-13B-64k如何重塑长文本处理范式

    • 

  • 
仓颉编程语言完整入门指南：从零开始快速上手

    • 

  • 
37、KDE 常用小部件介绍

    • 

  • 
智能决策引擎：制造业流程优化的AI革命

    • 

  • 
Python性能测试终极指南：pyperf模块完整教程

    • 

  • 
ComfyUI效率节点终极完整教程：一键部署方法与工作流程优化指南

    • 

  • 
Flink SQL Top-N 深度从“实时榜单”到“少写点数据”

    • 

  • 
IndraDB图数据库终极指南：Rust技术栈的架构革命

    • 

  • 
如何用影刀RPA自动化采集小红书作品评论？支持＂视频图文+折叠评论＂采集

    • 

  • 
5分钟快速上手NI-VISA：虚拟仪器通信终极指南

    • 

  • 
5个技巧让SSH连接像钢铁侠战衣一样坚不可摧

    • 

  • 
毕业论文之战：选择通用的“速成写手”，还是专业的“深度宏智树AI”？

    • 

  • 
AI写论文终极测评：宏智树AI凭何成为“学术救星”中的隐藏冠军？

    • 

  • 
PPT模板哪家好：2025年12月深度测评排名前五推荐

    • 

  • 
GB28181协议终极测试指南：自动化工具完整解决方案

    • 

  • 
openpnp - 确定自动换刀坐标的辅助工装

    • 

  • 
71、深入探索：Python C API 的扩展与嵌入

    •