news 2026/6/10 18:27:51

教育平台TinyMCE4处理Word艺术字粘贴变成乱码如何修复？

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
教育平台TinyMCE4处理Word艺术字粘贴变成乱码如何修复？

作为陕西某软件公司的一名前端工程师，近期我接到了一个关键需求：需在企业网站的后台管理系统文章发布模块中，集成Word粘贴、Word文档导入及微信公众号内容粘贴（含自动下载并上传公众号文章图片至服务器）的功能。这一需求旨在通过Web编辑器工具栏新增插件实现，要求集成便捷、不影响现有系统功能，且用户操作需简单直观。以下是我从需求分析、产品评估到开发实现的全过程记录。

一、需求分析与产品评估

需求梳理：

  1. Word粘贴功能：支持从Word复制内容并粘贴至编辑器，图片自动上传至服务器（初期本地存储，后期迁移至阿里云/华为云OBS/腾讯云等对象存储），保留文档样式（表格、字体、颜色等）。
  2. 微信公众号内容粘贴：自动解析公众号文章中的图片并上传至服务器，避免使用BASE64编码（因质量低且增加HTML体积）。
  3. 文档导入功能：支持Word、Excel、PPT、PDF导入，保留图片和样式。
  4. 技术约束：前端基于vue2-cli + TinyMCE，后端SpringBoot，开发工具IntelliJ IDEA，数据库MySQL，服务器阿里云。

产品评估：

  • TinyMCE插件生态：TinyMCE虽有官方paste插件，但无法满足图片自动上传和样式保留需求，需定制开发。
  • 第三方库对比：
    • Mammoth.js：适合Word文档解析，但需扩展图片上传逻辑。
    • Docx.js/PDF.js：分别用于Word/PDF解析，但集成复杂度高。
    • 自定义解决方案：结合TinyMCE API和后端服务，实现灵活控制。

结论：采用自定义开发方案，基于TinyMCE扩展插件，结合后端SpringBoot服务处理图片上传和文档解析。

二、开发过程

1. 前端插件开发（TinyMCE扩展）

步骤：

  1. 注册插件：在TinyMCE初始化配置中添加自定义插件。
  2. 监听粘贴事件：拦截粘贴内容，提取图片和HTML。
  3. 图片上传：通过FormData将图片二进制数据发送至后端。
  4. 样式保留：使用cleanHtml方法过滤冗余标签，保留核心样式。

代码示例（前端插件核心逻辑）：

// plugins/customPaste/plugin.jstinymce.PluginManager.add('customPaste',function(editor){editor.on('paste',function(e){constclipboardData=e.clipboardData||window.clipboardData;constitems=clipboardData.items;// 处理图片上传for(leti=0;i<items.length;i++){if(items[i].type.indexOf('image')!==-1){constfile=items[i].getAsFile();uploadImage(file).then(url=>{// 替换图片URL为服务器地址consthtml=editor.getContent({format:'html'});editor.setContent(html.replace(/src="data:image\/[^;]+;base64,/g,`src="${url}`));});}}// 保留Word样式（简化版）consthtml=clipboardData.getData('text/html');constcleanedHtml=cleanWordHtml(html);// 自定义方法过滤冗余标签editor.insertContent(cleanedHtml);});functionuploadImage(file){constformData=newFormData();formData.append('file',file);returnfetch('/api/upload',{method:'POST',body:formData}).then(res=>res.json()).then(data=>data.url);}});
2. 后端服务开发（SpringBoot）

功能：

  1. 图片上传接口：接收二进制文件，存储至本地或对象存储（如阿里云OSS）。
  2. 文档解析接口：调用Mammoth.js/Apache POI解析Word/Excel，返回HTML和图片列表。

代码示例（图片上传接口）：

// Controller层@RestController@RequestMapping("/api")publicclassFileUploadController{@PostMapping("/upload")publicResponseEntity>uploadFile(@RequestParam("file")MultipartFilefile){try{// 保存至本地（示例）StringfilePath="/uploads/"+UUID.randomUUID()+".png";file.transferTo(newFile(filePath));// 返回URL（实际项目需替换为对象存储URL）Mapresponse=newHashMap<>();response.put("url","https://your-domain.com"+filePath);returnResponseEntity.ok(response);}catch(Exceptione){returnResponseEntity.status(500).build();}}}

文档解析示例（使用Mammoth.js）：

// 服务层（简化版）publicStringconvertDocxToHtml(MultipartFilefile)throwsIOException{ByteArrayInputStreamstream=newByteArrayInputStream(file.getBytes());Mammoth.Resultresult=Mammoth.convertToHtml(stream);returnresult.getValue();// 返回HTML字符串}
3. 集成与测试
  1. TinyMCE配置：在vue2-cli项目中注册插件。
// main.jsimport'tinymce/plugins/customPaste';// 引入自定义插件Vue.prototype.$tinymce.init({selector:'#editor',plugins:'customPaste',// 启用插件toolbar:'customPasteButton',// 添加工具栏按钮});
  1. 功能测试：
    • 验证Word粘贴是否保留样式和图片。
    • 检查微信公众号图片是否自动上传。
    • 测试多格式文档导入（Word/PDF等）。

三、总结与优化

  1. 性能优化：

    • 图片上传采用异步队列，避免阻塞主线程。
    • 对大文件分片上传，提升稳定性。

  2. 扩展性：

    • 抽象图片存储层，支持多云厂商切换。
    • 文档解析服务独立部署，减轻主应用负载。

  3. 安全性：

    • 限制上传文件类型和大小。
    • 对用户输入进行XSS过滤。

通过此次开发，我们成功实现了客户需求，且代码结构清晰，便于后期维护和扩展。

复制插件

安装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/9 18:40:20



导师推荐!千笔，顶尖配置的AI论文写作软件


你是否曾为论文选题而苦恼&#xff1f;是否在深夜面对空白文档时感到无从下手&#xff1f;是否反复修改却总对表达不满意&#xff1f;论文写作不仅是学术能力的考验&#xff0c;更是时间与精力的挑战。对于本科生来说&#xff0c;从选题到查重&#xff0c;每一步都可能成为“卡…






作者头像
李华














网站建设
2026/6/10 13:26:36



Jenkins节点拉取代码报错场景及解决方案全解析


Jenkins节点在拉取代码时可能因多种原因报错&#xff0c;涵盖SSH认证、网络配置、Git环境、权限管理等问题。本文从问题机制和解决方案两个维度&#xff0c;系统梳理常见场景及处理方法&#xff0c;帮助快速定位和修复问题。一、SSH认证相关问题
1. 密钥算法不匹配
现象&#x…






作者头像
李华














网站建设
2026/6/10 14:07:11



全网最全8个降AIGC网站，千笔AI助你高效降AI率


AI降重工具&#xff1a;高效降低AIGC率&#xff0c;守护学术诚信 
在当前学术研究日益依赖AI辅助写作的背景下&#xff0c;如何有效降低论文中的AIGC率&#xff0c;已成为研究生们关注的核心问题。随着各大高校和期刊对AI生成内容的识别技术不断升级&#xff0c;单纯依靠AI撰写…






作者头像
李华















网站建设
2026/5/15 23:19:56



多平台环境下大文件上传的通用解决方案总结？


2023年XX月XX日 &#x1f31f; | 一个菜鸟程序员的“秃头”日记 &#x1f4bb; 今日份的崩溃与突破 
早上8点&#xff1a;对着镜子默念三遍——“我能搞定10G文件上传&#xff01;”&#xff08;然后发现IE8连console.log都报错…&#xff09; 
上午10点&#xff1a;试图用WebU…






作者头像
李华














网站建设
2026/6/9 23:40:20



智能制造MES系统如何实现SPC控制图到富文本编辑器的动态绑定？


重庆XX教育集团项目评估与技术方案 ——基于信创环境的富文本编辑器增强模块开发纪实 一、需求分析与技术评估 
1. 核心需求矩阵 
需求分类具体要求技术挑战点内容粘贴Word/微信公众号图文粘贴&#xff08;含图片自动上传&#xff09;IE8下Clipboard API兼容性、微信公众号反爬…






作者头像
李华