当前位置： 首页 > news >正文

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

news 2026/5/11 20:34:33

作为陕西某软件公司的一名前端工程师，近期我接到了一个关键需求：需在企业网站的后台管理系统文章发布模块中，集成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转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片。
下载示例
点击下载完整示例





http://www.jsqmd.com/news/345358/






相关文章：


  • 
2026精准学数跃靠谱不，梳理全国精准学数跃加盟排名情况 - 工业品牌热点

    • 

  • 
梳理京津冀地区专业离婚律师事务所，老牌离婚律所选购指南 - 工业品网

    • 

  • 
央企应用中如何处理大文件断点续传的方案总结？

    • 

  • 
2026年资深离婚律所推荐，北京元甲律所服务贴心 - myqiye

    • 

  • 
教育行业如何实现大文件批量上传的方案总结？

    • 

  • 
2026年热门的农业养殖项目/金头蜈蚣农业养殖项目项目优选指南 - 行业平台推荐

    • 

  • 
总结户外亮化灯具制造厂，云南口碑好的品牌排名 - mypinpai

    • 

  • 
2026年苏州靠谱婚房装修公司推荐，性价比高的品牌排行 - 工业推荐榜

    • 

  • 
深圳昊客网络科技海外GEO优化推广科普：AI时代出海企业的流量密码 - 深圳昊客网络

    • 

  • 
武汉新华电脑学校编程plc培训怎么样，费用怎么收 - 工业品牌热点

    • 

  • 
2026年上海、浙江等地好用的纯化水设备批量定制品牌推荐 - 工业设备

    • 

  • 
2026寒假放假通知SVG动画制作工具与指南  公众号文章必备组件合集 - peipei33

    • 

  • 
雷达原理实验教学系统定制化开发哪里能做？核心厂家与能力解析 - 品牌推荐大师

    • 

  • 
VMWare下Windows XP的声音问题

    • 

  • 
聊聊权威的AI自习室，精准数跃性价比高值得推荐 - 工业推荐榜

    • 

  • 
2026年昆明知名的别墅全案设计品牌企业排名，哪家性价比高？ - 工业设备

    • 

  • 
TP框架 之vue3简易论坛系统

    • 

  • 
java--线程安全问题

    • 

  • 
好写作AI：专治“对着空白文档发呆”，你的灵感急救呼吸机！

    • 

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

    • 

  • 
真心不骗你!继续教育论文神器 —— 千笔ai写作

    • 

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

    • 

  • 
格式总出错？AI论文工具 千笔 VS 文途AI，本科生写作更轻松！

    • 

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

    • 

  • 
chrome://settings/content/all

    • 

  • 
2026年湿度仪靠谱生产商费用分析，昶艾科技定制生产价格合理 - 工业品网

    • 

  • 
计算机网络经典问题透视：蜂窝网络切换如何“扼杀”你的TCP连接？

    • 

  • 
计算机毕设java助学金管理系统 高校学生资助信息管理平台 校园奖助贷一体化服务系统

    • 

  • 
英国供应链求职机构榜单：供应链机构深度测评 - 技研备忘录

    • 

  • 
蠕动泵选哪个品牌？国内外优质品牌及选型指南 - 品牌推荐大师1

    •