news 2026/1/9 2:50:42

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进行投诉反馈，一经查实，立即删除！













网站建设
2025/12/30 5:31:08



YOLO模型参数量太大？教你如何选择合适版本


YOLO模型参数量太大？教你如何选择合适版本
在智能摄像头、工业质检线甚至无人机上，你可能都见过这样的场景：设备需要“看清”眼前的世界——识别行人、检测缺陷、追踪目标。而背后支撑这一切的，往往是一个叫 YOLO 的模型。它像一位…






作者头像
李华














网站建设
2025/12/29 17:50:12



5.1 滑模控制（SMC）及其改进


5.1 滑模控制（SMC）及其改进 
滑模控制（Sliding Mode Control, SMC），又称变结构控制，是一种因其对参数摄动和外部干扰具有强鲁棒性而备受关注的非线性控制策略。自20世纪下半叶理论体系初步建立以来，SMC在电机驱动、机器人、航空航天等对可靠性与动态性能要求苛刻的领域得…






作者头像
李华














网站建设
2025/12/31 11:45:28



springboot_ssm音乐播放在线试听网站


目录具体实现截图系统所用技术介绍写作提纲核心代码部分展示系统性能结论源码文档获取/同行可拿货,招校园代理 ：文章底部获取博主联系方式！具体实现截图 
springboot_ssm音乐播放在线试听网站     
系统所用技术介绍 本系统采取了一系列的设计原则&#…






作者头像
李华














网站建设
2025/12/29 18:19:41



YOLO在停车场车牌识别系统中的集成方案


YOLO在停车场车牌识别系统中的集成方案系统挑战：当智能停车遇上真实世界
在城市出入口、商业综合体地下车库或高速公路服务区，每天都有成千上万辆车进出。如何让道闸“一眼认出”车牌并自动放行？这看似简单的动作背后，藏着不少技术…






作者头像
李华














网站建设
2026/1/2 22:04:57



继续教育必备8个降AI率工具，高效降aigc推荐！


继续教育必备8个降AI率工具，高效降aigc推荐！
AI降重工具：让论文更自然，让学术更专业
在继续教育的学习过程中，论文写作是不可避免的重要环节。然而，随着人工智能技术的广泛应用，越来越多的学生开…






作者头像
李华














网站建设
2025/12/29 20:51:31



2025继续教育必备8个降AI率工具测评


2025继续教育必备8个降AI率工具测评
2025继续教育必备8个降AI率工具测评
在人工智能技术日益普及的今天，学术论文、研究报告等文字内容的AI生成率检测已成为继续教育领域不可忽视的问题。随着各大平台对AIGC内容识别能力的不断提升，传统的“换词降重”方…






作者头像
李华