企业官网建设流程全解析

铁路局集团公司CMS系统新闻模块Word导入功能升级项目实施记录

一、项目背景与需求分析

为响应信创国产化战略要求，提升CMS系统新闻模块的内容编辑效率，需实现以下功能：

1. 核心功能：支持Word文档一键导入，自动上传图片至服务器，保留原始样式。
2. 信创兼容性：
   • 操作系统：Windows、macOS、统信UOS、中标麒麟、银河麒麟、龙芯（MIPS架构）。
   • 数据库：达梦、人大金仓。
   • 开发环境：前端Vue2-cli + TinyMCE编辑器，后端SpringBoot。
3. 服务要求：7×24小时在线技术支持。

二、技术选型与产品评估

1. 候选方案对比

2. 最终选型

• 前端：TinyMCE 5.x +tinymce-wordimport插件（开源版优化）。
• 后端：SpringBoot集成Apache POI（解析Word） +HttpClient（图片上传）。
• 信创适配：
  • 使用OpenJDK替代Oracle JDK，确保龙芯等MIPS架构兼容性。
  • 数据库驱动适配达梦（DM8）、人大金仓（KingbaseES V8）。
• 技术支持：选择提供SLA服务等级协议的厂商，确保7×24小时响应。

三、开发实施过程

1. 前端开发（Vue2 + TinyMCE）

• 步骤1：集成TinyMCE编辑器，配置自定义工具栏按钮“Word导入”。

  tinymce.init({selector:'#editor',plugins:'wordimport',toolbar:'wordimport',external_plugins:{'wordimport':'/static/tinymce-wordimport/plugin.min.js'}});

• 步骤2：实现Word文件解析与样式转换。
  • 使用插件将Word内容转换为HTML片段，保留字体、颜色、表格等样式。
  • 通过正则表达式提取图片Base64数据，封装为FormData传递至后端。

2. 后端开发（SpringBoot）

• 步骤1：文件接收与图片上传接口。

  @PostMapping("/api/upload-image")publicResponseEntityuploadImage(@RequestParam("file")MultipartFilefile){StringserverPath=fileService.saveToServer(file);// 保存至信创兼容存储returnResponseEntity.ok(serverPath);}

• 步骤2：Word内容处理服务。
  • 使用Apache POI解析.docx文件，提取文本、图片、样式信息。
  • 调用图片上传接口，替换HTML中的Base64图片为服务器URL。
  • 返回最终HTML至前端渲染。

3. 信创环境适配

• 操作系统：
  • 编译时指定-Dos.name=Linux（针对中标麒麟/银河麒麟）。
  • 龙芯平台使用LoongArch架构指令集优化。
• 数据库：
  • 达梦数据库配置JDBC URL：jdbc:dm://host:port/DATABASE?schema=USER。
  • 人大金仓启用SSL加密连接，适配国产加密算法。

4. 测试与验证

• 兼容性测试：
  • 在统信UOS + 达梦数据库环境下，验证图片上传成功率≥99.9%。
  • 龙芯平台性能测试：导入50页Word文档耗时≤15秒。
• 安全测试：
  • 防止XSS攻击：对导入的HTML进行DOMPurify过滤。
  • 文件类型白名单限制（仅允许.docx）。

四、技术支持与运维保障

1. 厂商合作：
   • 与TinyMCE商业版供应商签订SLA协议，明确故障响应时间≤30分钟。
   • 达梦数据库提供专属技术支持通道，确保国产数据库问题4小时内解决。
2. 监控体系：
   • 部署Prometheus + Grafana监控图片上传接口成功率、数据库连接池状态。
   • 设置告警阈值：上传失败率>1%时触发钉钉机器人通知。

五、项目成果与交付

1. 功能交付：
   • 新闻模块支持Word一键导入，样式保留完整度≥95%。
   • 图片自动上传至国产化对象存储（如华为云OBS统信版）。
2. 文档清单：
   • 《信创环境部署指南》《API接口文档》《运维应急预案》。
3. 培训计划：
   • 对内容编辑人员开展TinyMCE高级功能培训。
   • 对运维团队进行达梦数据库故障排查专项培训。

项目负责人签字：_________________
日期：2025年XX月XX日

备注：本项目严格遵循《信息安全技术—信息系统安全等级保护基本要求》（GB/T 22239-2019），确保国产化环境下的数据安全与自主可控。

复制插件

安装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转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片。

下载示例

点击下载完整示例