news 2026/6/25 18:35:16

TinyMCE支持MathType公式转矢量格式保存

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TinyMCE支持MathType公式转矢量格式保存

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

一、项目背景与需求分析

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

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

二、技术选型与产品评估

1. 候选方案对比
方案优势劣势
TinyMCE官方插件原生集成度高，支持样式保留；提供商业版技术支持。国产化环境适配需二次开发；图片上传需自定义服务端接口。
第三方工具（如Pandoc）格式转换能力强，支持跨平台。需额外开发中间服务；样式保留效果不稳定；国产化OS兼容性需验证。
开源库（如Mammoth.js）轻量级，可深度定制；支持图片Base64转存。功能较基础，需大量开发；信创环境适配性未知。
商业解决方案（如万兴PDF/WPS开放API）功能完善，支持全平台；提供信创认证版本。成本较高；需对接第三方服务，存在数据安全风险。
开源解决方案（如WordPaster）功能完善，支持全平台；提供信创认证版本。完全开放全平台产品源代码，产品100%完全自主安全可控需要用户安装插件；
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转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片。
下载示例
点击下载完整示例









版权声明:

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！













网站建设
2026/6/20 17:49:33



站群系统大文件上传插件的跨平台支持与优化


大文件传输方案设计与实现方案 
作为湖南XX软件公司的前端工程师，面对20G大文件传输的需求，我经过深入调研和分析后提出以下解决方案。 
一、技术挑战分析 大文件传输： 20G文件直接上传会导致内存溢出网络中断后需要支持断点续传传输进度监控…






作者头像
李华














网站建设
2026/6/14 20:53:54



2025年6月编程语言排行榜：Python稳第一，C++又火了？


TIOBE编程语言排行榜是衡量编程语言流行度的一个长期指标。2025年6月的榜单反映了当前开发领域的技术趋势和市场需求。这份榜单的变化不仅仅是数字的浮动，背后更是技术社区兴趣、就业市场方向和企业技术栈选择的综合体现。理解这些变化，能帮助开发者和技…






作者头像
李华














网站建设
2026/6/14 6:23:08



线程安全必知：为什么ThreadLocal用完必须remove？


在多线程开发中，ThreadLocal 是一个用于存储线程局部变量的工具类，它能有效避免线程间的数据共享冲突。然而，许多开发者在使用时往往只关注其 set() 和 get() 方法，而忽略了关键的 remove() 方法。如果不及时清理 ThreadLocal 中存…






作者头像
李华














网站建设
2026/6/24 11:12:12



农业智能化：利用YOLO进行病虫害实时监测


农业智能化：利用YOLO进行病虫害实时监测
在广袤的农田里，一片叶子上的微小斑点可能预示着一场即将蔓延的病害危机。传统农业中，这类隐患往往要等到症状明显、成片作物受损时才被发现——那时防治已为时过晚。如今，随着人工智能技术…






作者头像
李华















网站建设
2026/6/22 19:38:18



dfshim.dll损坏丢失找不到 打不开软件问题 下载方法


在使用电脑系统时经常会出现丢失找不到某些文件的情况，由于很多常用软件都是采用 Microsoft Visual Studio 编写的，所以这类软件的运行需要依赖微软Visual C运行库，比如像 QQ、迅雷、Adobe 软件等等，如果没有安装VC运行库或者安装…






作者头像
李华