news 2026/5/31 0:40:35

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/5/28 13:01:16



手把手教你华为广告投放，华为推广全国开户


华为广告投放 在快速发展的数字时代，企业如何有效地投放广告，获取更多客户关注与转化，成为了一个热门话题。作为全球zhiming的科技公司，华为在广告投放领域的表现越来越引人注目。广州博辉网络技术有限公司正是利用这一趋势&#…






作者头像
李华














网站建设
2026/5/28 13:06:56



cms系统大文件上传功能实现与加密存储讨论


我是一名扎根于湖南长沙的程序员，近期正面临一个极具挑战性的项目需求：需要运用百度开源组件WebUploader来实现大文件的高效传输，目标文件规模高达20G左右。此项目不仅要求实现文件的上传与下载功能，还需支持文件夹的上传和下载&a…






作者头像
李华














网站建设
2026/5/31 0:39:49



YOLO目标检测输出格式解析（坐标、类别、置信度）


YOLO目标检测输出格式解析（坐标、类别、置信度） 
在工业相机每秒捕捉30帧图像的流水线上，一个微小的金属碎片可能意味着整条产线的停摆。如何让机器“看见”并即时响应？答案往往藏在模型输出的一组看似枯燥的数据中：四…






作者头像
李华














网站建设
2026/5/28 13:06:57



索尼L39h固件升级、刷机指南与风险全解析


关于索尼L39h的固件，很多用户可能既熟悉又陌生。它作为手机的系统核心，直接影响着设备的性能、稳定性和功能。无论是出于升级系统、修复错误，还是优化体验的目的，了解固件相关知识都至关重要。本文将围绕几个关键问题，…






作者头像
李华














网站建设
2026/5/30 20:31:42



YOLO与语音识别结合：构建多模态交互系统


YOLO与语音识别结合：构建多模态交互系统
在智能制造车间里，一名工人指着传送带上的零件说：“把那个偏左的金属盖子挑出来。”传统自动化系统可能一头雾水——“那个”是哪个？“偏左”以谁为参照？而一个融合了视觉和听觉…






作者头像
李华














网站建设
2026/5/28 13:07:06



YOLO训练支持增量学习，持续更新模型知识


YOLO训练支持增量学习，持续更新模型知识
在一条自动化生产线上，质检系统原本能准确识别划痕、气泡和缺料等常见缺陷。某天新产品上线，一种新型封装工艺引入了从未见过的“焊点偏移”问题——而现有YOLO模型对此完全“视而不见”。传统做法是收…






作者头像
李华