企业官网建设流程全解析

天津XX软件公司 - 客户单位CMS系统新闻模块Word导入功能升级项目实施记录

一、项目背景与需求确认

1. 客户单位需求：

   • 在CMS系统后台新闻模块中新增Word文档一键导入功能，需自动上传图片至服务器并保留原始样式（字体、颜色、表格、段落格式等）。
   • 信创环境支持：
     • 操作系统：Windows、macOS、统信UOS、中标麒麟、银河麒麟、龙芯（LoongArch架构）。
     • 数据库：达梦DM8、人大金仓KingbaseES V8。
     • 开发框架：前端Vue2-cli + TinyMCE编辑器，后端SpringBoot 2.7.x。
   • 服务要求：提供7×24小时在线技术支持，故障响应时间≤1小时。

2. 项目目标：

   • 完成功能开发并通过国产化环境兼容性测试。
   • 交付可维护的代码、部署文档及培训材料。

二、技术选型与产品评估

1. 候选方案分析

|

决策：采用TinyMCE 5.10 + 自定义SpringBoot后端服务，平衡开发效率与国产化适配需求。

2. 技术栈确认

• 前端：
  • Vue2-cli + TinyMCE 5.10（企业版试用许可，确保技术支持）。
  • 集成tinymce-wordimport插件（开源版扩展）。
• 后端：
  • SpringBoot 2.7.12 + Apache POI 5.2.3（解析Word文档）。
  • HttpClient 4.5.13（图片上传至国产化存储）。
• 信创适配：
  • 数据库驱动：达梦JDBC 8.1.1.193、人大金仓JDBC 8.6.0。
  • 跨平台构建：使用OpenJDK 11（支持LoongArch架构）。

三、开发实施过程

1. 前端开发（Vue2 + TinyMCE）

• 步骤1：集成TinyMCE编辑器并配置自定义按钮。

  // main.jsimport'tinymce/plugins/paste';import'tinymce/plugins/importcss';import'./plugins/wordimport';// 自定义插件tinymce.init({selector:'#news-editor',plugins:'paste importcss wordimport',toolbar:'wordimport',setup:(editor)=>{editor.ui.registry.addButton('wordimport',{text:'导入Word',onAction:()=>{constinput=document.createElement('input');input.type='file';input.accept='.docx';input.onchange=async(e)=>{constfile=e.target.files[0];consthtml=awaitconvertWordToHtml(file);// 调用后端APIeditor.setContent(html);};input.click();}});}});

• 步骤2：实现Word内容预处理。

  • 使用docx-preview库在前端渲染Word大纲，供用户确认样式。

2. 后端开发（SpringBoot）

• 步骤1：文件解析服务。

  // WordParserService.javapublicStringparseWordToHtml(MultipartFilefile)throwsIOException{XWPFDocumentdoc=newXWPFDocument(file.getInputStream());Stringhtml=newXHTMLConverter().convert(doc,null,null);// Apache POI扩展// 提取图片并上传Patternpattern=Pattern.compile("src=\"data:image/(.*?);base64,(.*?)\"");Matchermatcher=pattern.matcher(html);while(matcher.find()){Stringbase64=matcher.group(2);StringimageUrl=uploadImageToServer(base64,matcher.group(1));html=html.replace(matcher.group(0),"src=\""+imageUrl+"\"");}returnhtml;}

• 步骤2：国产化存储适配。

  • 图片上传至华为云OBS（统信版SDK），支持SSL加密传输。
  • 达梦数据库连接池配置：

    spring:datasource:url:jdbc:dm://192.168.1.100:5236/CMS_DBdriver-class-name:dm.jdbc.driver.DmDriverhikari:maximum-pool-size:10

3. 信创环境兼容性处理

• 操作系统适配：
  • 中标麒麟/银河麒麟：使用-Dfile.encoding=UTF-8启动JVM。
  • 龙芯平台：通过-march=loongarch64编译Native库。
• 数据库优化：
  • 达梦SQL调优：为图片URL字段添加索引，避免全表扫描。
  • 人大金仓事务隔离级别设置为READ COMMITTED。

四、测试与验证

1. 功能测试：
   • 用例1：导入含10张图片的50页Word文档，验证图片上传成功率100%。
   • 用例2：检查复杂表格（合并单元格、跨页）样式保留完整性。
2. 信创兼容性测试：
   • 统信UOS + 达梦：通过自动化脚本验证CRUD操作响应时间≤2秒。
   • 龙芯平台：使用JProfiler监控内存占用，确保无内存泄漏。
3. 安全测试：
   • 防止XXE攻击：禁用Apache POI的DTD加载。
   • 文件类型限制：通过Magic Number校验文件真实性。

五、技术支持与运维方案

1. 7×24小时服务保障：
   • 与TinyMCE签订企业版支持协议，提供专属技术支持通道。
   • 部署Zabbix监控系统，实时告警数据库连接池耗尽等故障。
2. 知识转移：
   • 为客户单位提供《国产化环境部署手册》《API接口规范》。
   • 开展2次线上培训，覆盖编辑器高级功能与故障排查。

六、项目交付成果

1. 功能模块：
   • 新闻编辑器新增“Word导入”按钮，支持一键上传与样式保留。
   • 图片自动压缩（长边≤1920px）以节省存储空间。
2. 文档清单：
   • 《信创环境适配报告》《测试用例库》《运维应急预案》。
3. 验收标准：
   • 通过等保2.0三级测评，符合《信息安全技术—政务信息共享数据安全技术要求》。

项目负责人签字：_________________
客户单位代表签字：_________________
日期：2025年XX月XX日

备注：本项目代码已开源至Gitee信创专区，供客户单位二次开发参考。

复制插件

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

上传网络图片

一键自动上传网络图片。

下载示例

点击下载完整示例