TinyMCE导入excel数据到html富文本

最新推荐文章于 2026-03-29 17:21:43 发布
原创 最新推荐文章于 2026-03-29 17:21:43 发布 · 1k 阅读 · 22 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测

铁路局集团公司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")
public ResponseEntity uploadImage(@RequestParam("file") MultipartFile file) {
    String serverPath = fileService.saveToServer(file); // 保存至信创兼容存储
    return ResponseEntity.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），确保国产化环境下的数据安全与自主可控。

复制插件

WordPaster插件文件夹

安装jquery

npm install jquery

在组件中引入

  // 引入tinymce-vue
  import Editor from '@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';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor).importExcel()
    }

    var register$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)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('excelimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加word转图片工具栏按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().importWordToImg()
    }

    var register$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)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('importwordtoimg', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加粘贴网络图片工具栏按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().UploadNetImg()
    }

    var register$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)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('netpaster', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加导入PDF按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().ImportPDF()
    }

    var register$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)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('pdfimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加导入PPT按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().importPPT()
    }

    var register$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)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('pptimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加导入WORD按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor).importWord()
    }

    var register$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)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('wordimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加WORD粘贴按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    var ico = "http://localhost:8080/static/WordPaster/plugin/word.png"
    function selectLocalImages(editor) {
      WordPaster.getInstance().SetEditor(editor).PasteManual()
    }

    var register$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)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      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=d88b60a2b0204af1ba62fa66288203ed
    PostUrl: 'http://localhost:8891/upload.aspx',
    // 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
    ImageUrl: 'http://localhost:8891{url}',
    // 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
    FileFieldName: 'file',
    // 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
    ImageMatch: ''
})

在页面中引入组件

功能演示

编辑器

在编辑器中增加功能按钮
TinyMCE编辑器界面

导入Word文档,支持doc,docx

粘贴Word和图片

导入Excel文档,支持xls,xlsx

粘贴Word和图片

粘贴Word

一键粘贴Word内容，自动上传Word中的图片，保留文字样式。
粘贴Word和图片

Word转图片

一键导入Word文件，并将Word文件转换成图片上传到服务器中。
导入Word转图片

导入PDF

一键导入PDF文件，并将PDF转换成图片上传到服务器中。
导入PDF转图片

导入PPT

一键导入PPT文件，并将PPT转换成图片上传到服务器中。
导入PPT转图片

上传网络图片

一键自动上传网络图片。
自动上传网络图片

下载示例

点击下载完整示例

标签
#excel #html #前端 #umeditor粘贴word #ueditor粘贴word
#ueditor复制word #ueditor上传word图片
tinymce富文本编辑器集成demo，添加powerpaste插件，支持word、excel带格式粘贴
09-25
tinymce富文本编辑器集成demo，添加powerpaste插件，支持word、excel带格式粘贴。demo.html
如何使用TinyMCE前端网页编辑器实现Word图片转存？
2501_90699780的博客
03-24 920
要求：开源，免费，技术支持编辑器：TinyMCE前端：vue,vue2-cli,vue3-cli后端：java,jsp,springboot,asp.net,php,asp,.net core,.net mvc,.net form功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏。
TinyMCE4网页富文本编辑器，粘贴word图片怎么正常显示？
weixin_45525177的博客
07-27 865
FormData.docxDOMPurify.docx：2025年XX月XX日：本项目严格遵循《信息安全技术—信息系统安全等级保护基本要求》（GB/T 22239-2019），确保国产化环境下的数据安全与自主可控。
使用tinymce编辑器从word保持原格式复制粘贴的办法
Jenny_ttw的博客
11-03 7272
tinymce官方有一个插件叫powerpaste（官方收费）,找到资源后，把他引入到plugins下，并在tinymce下的index文件中把他引入： initTinymce() { const _this = this window.tinymce.init({ language: 'zh_CN', plugins: ...
芯片制造企业如何解决CAD图纸粘贴到TinyMCE的矢量输出？
最新发布
alisky119的博客
03-29 349
作为北京高新技术企业和软件企业项目负责人，我们当前面临企业网站后台管理系统中文档处理功能的升级需求。
TinyMCE导入excel数据到政府公文
2501_90646449的博客
12-09 632
680元做全功能？甲方爸爸以为我是用爱发电？（群号再发一遍：223813913，进群送红包，不送是狗！）”
TinyMCE6导入excel数据到OA系统表格
2501_90646449的博客
12-12 686
开箱即用的编辑器插件支持多种文档格式导入复杂格式完美保留LaTeX公式自动转换图片自动上传OSS微信公众号内容兼容预算控制在680元内作为重庆程序员，我用火锅般的热情和代码解决了客户的痛点。这个项目不仅提升了客户的工作效率，也让我在.NET技术栈上有了新的积累。欢迎同行加群交流，一起在代码的世界里"涮"出精彩！
TinyMCE4导入excel表格数据到html编辑器
alisky119的博客
12-10 820
本文介绍了在Vue2项目中使用Tinymce富文本编辑器保留Word粘贴格式的解决方案。作者最初尝试通过importword插件实现功能但效果不佳，最终发现Tinymce的经典模式可以直接保留Word内容的完整格式。文章包含具体实现代码示例，并附有参考链接和最终效果动图展示，证明该方案能完美满足政府项目对文档格式的严格要求。
TinyMCE5支持信创系统excel数据导入
alisky119的博客
12-12 903
富文本编辑器の逆袭：我让TinyMCE学会了"吃"Word文档！（推了推并不存在的眼镜，故作高深地敲了敲键盘）继上次把TinyMCE折腾得能导出Word之后，我这双"键盘侠"的手又痒了——“要是能反过来把Word塞进编辑器里编辑，那岂不是能少掉90%的格式调整头发？”（摸着日渐稀疏的头顶陷入沉思）说干就干！我火速冲进GitHub的"魔法商店"，在茫茫插件海洋中捞出了传说中能让TinyMCE"反刍"Word的神秘法宝——importword插件！（插件名被我强行加粗以表尊重）
TinyMCE6导入excel数据到CMS系统
2501_90646449的博客
12-10 1041
本方案通过。
TinyMCE5导入excel数据到政府公文
alisky119的博客
12-11 680
在预算内（总计$80+￥15阿里云费用）完成了需求实现了所有文档类型的导入完美支持公式和复杂样式。
农业大数据平台如何通过TinyMCE实现Excel动态图表导入？
alisky119的博客
11-15 969
欢迎加入QQ群223813913一起交流！
如何在VUE项目中使用TinyMCE导入PPT中的图片？
alisky119的博客
05-21 992
要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,信创国产化系统。
VUE + TinyMCE，能否实现Excel表格图片的导入与编辑？
weixin_45525177的博客
05-21 983
要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,信创国产化系统。
在Vue项目中，TinyMCE编辑器如何支持WORD、EXCEL等多种格式导入？
alisky119的博客
06-22 666
要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,信创国产化系统。
Vue平台下，TinyMCE编辑器怎样支持PDF文件的导入处理？
2501_90646777的博客
03-18 1083
要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,信创国产化系统。
网页编辑器TinyMCE能否支持从Excel中导入数据并保留格式？
alisky119的博客
10-10 718
完全满足功能需求：Word粘贴、文档导入、微信公众号内容处理一应俱全信创兼容性强：已在多个政府项目中验证买断授权模式：符合公司长期使用需求技术生态完善：与现有Vue+TinyMCE技术栈无缝集成优先在测试环境完成全流程验证对关键用户进行操作培训准备完善的回滚方案文档化集成方案，便于后续维护该方案实施后，将显著提升内容编辑效率，满足政府客户对信创环境的要求，同时为公司后续项目提供标准化解决方案。
TinyMCE4导入excel数据绑定CMS系统模板
alisky119的博客
12-28 585
作为北京某国企项目负责人，我们当前面临在企业网站后台管理系统中集成Word粘贴、文档导入和微信公众号内容处理功能的迫切需求。该需求源于政府项目对文档处理能力提升的要求，同时需要满足信创国产化环境的兼容性。
TinyMCE5跨平台导入excel表格到网页
alisky119的博客
12-11 687
选择，结合解析Word文档，实现图片自动上传与样式保留。@Column@DmColumnpasteFileReader.docx.jpg/.png：XXX集团技术中心：2025年XX月XX日。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值