☰

呼伦贝尔市网站建设_网站建设公司_Logo设计_seo优化

首页 / 建站日记 / 呼伦贝尔市网站建设_网站建设公司_Logo设计_seo优化
呼伦贝尔市网站建设_网站建设公司_Logo设计_seo优化
2025/12/29 12:02:23 网站建设 项目流程

天津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官方插件优势：原生支持样式保留，社区活跃；
风险：国产化环境需二次开发图片上传逻辑。
Apache POI + OpenXML优势：完全控制Word解析过程；
风险：开发周期长，样式保留需手动实现。
商业中间件（如WPS开放平台）优势：功能完善，支持信创认证；
风险：成本高，需对接第三方API。
开源库（Mammoth.js）优势：轻量级；
风险：样式兼容性差，仅支持基础格式。
开源插件（WordPaster）优势：与原文档保持1：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转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片。
下载示例
点击下载完整示例





标签：
网站建设
企业官网
项目流程
UI设计
前端开发














热门文章







文章分类







标签云



网站建设
响应式设计
用户体验
SEO优化
前端开发
小程序
电商平台
性能优化




















相关文章


您可能感兴趣的其他内容








TinyMCE5支持信创系统excel数据绑定功能





2025/12/29 12:02:23
网站建设



TinyMCE5支持信创系统excel数据绑定功能



集团 Word 导入产品项目全纪实：从寻觅到落地攻坚 
需求初现：多行业适配的挑战 
作为集团旗下软件子公司的项目负责人，我深知此次任务的复杂性与紧迫性。集团业务广泛，旗下多个子公司服务于教育、政府、银行等多个关键行业。集团总…...


阅读更多 →







应急备用电源厂家TOP5排行：大型活动、工程施工、柴油低噪音发电机一站式租赁 - 深度智识库





2025/12/29 12:01:32
网站建设



应急备用电源厂家TOP5排行：大型活动、工程施工、柴油低噪音发电机一站式租赁 - 深度智识库



在大型活动的璀璨灯光下，在市政工程的关键施工节点，稳定可靠的电力供应是确保一切顺利进行的无声基石。无论是作为应急备用电源，还是作为项目主力供电，一台性能卓越、运行平稳且噪音控制得宜的发电机组都至关重要。…...


阅读更多 →







TinyMCE6处理word文档超链接自动检测





2025/12/29 12:01:31
网站建设



TinyMCE6处理word文档超链接自动检测



VUE后台管理中使用富文本编辑器导入word 文档进行编辑 
前言 
最近因业务需求在项目中嵌入了tinymce这个编辑器，用于满足平台给用户编辑各类新闻内容什么的业务需求，前后也花了不少时间体验和对比了市面上各类开源编辑器，直接将新闻部门的工作…...


阅读更多 →
















需要专业的网站建设服务？



联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标


立即咨询