TinyMCE5支持CMS系统word图片压缩

🚀【.NET老油条的TinyMCE插件暴风开发实录】🚀

（附：QQ群红包密码：“680元暴富”，进群领红包+抽提成，群主已疯！）

一、需求翻译（甲方爸爸の黑话转码）

客户说： "要个插件，能粘Word/Excel/PPT/PDF，还要支持公众号复制，公式要能变高清，图片自动传阿里云，按钮一点就搞定，别影响现有系统，预算680块！" 我翻译： 1. 前端：Vue3 + TinyMCE5 搞个粘贴按钮 2. 后端：ASP.NET WebForm 接收文件，解析内容，上传OSS 3. 核心难点： - 公式处理：Latex→MathML（别用图片，要矢量！） - 形状组：EMZ/WMZ这些妖孽必须支持 - 公众号复制：自动抓图片+替换链接 4. 预算：680元（群主说推荐成交提20%，四舍五入等于白嫖！）

二、技术选型（穷鬼版）

三、前端代码（Vue3 + TinyMCE插件）

// src/plugins/TinyMCEWordImport.jsimporttinymcefrom'tinymce/tinymce'import'tinymce/themes/silver'import'tinymce/plugins/paste'// 注册插件（穷鬼版）tinymce.PluginManager.add('wordimport',(editor)=>{editor.ui.registry.addButton('wordimport',{text:'智能粘贴',icon:'paste',onAction:()=>{// 触发隐藏的textarea捕获粘贴内容consttextarea=document.createElement('textarea')textarea.style.position='fixed'textarea.style.top='-9999px'document.body.appendChild(textarea)textarea.focus()// 监听粘贴事件textarea.onpaste=async(e)=>{constclipboardData=e.clipboardData||window.clipboardDataconstitems=clipboardData.itemslethtml=''// 遍历粘贴板内容（支持混合粘贴）for(leti=0;i<items.length;i++){if(items[i].kind==='file'&&/(docx|xlsx|pptx|pdf)$/i.test(items[i].name)){// 文件粘贴处理（伪代码）html=awaithandleFilePaste(items[i].getAsFile())}elseif(items[i].type.includes('html')){// 普通HTML粘贴（处理公众号内容）html=clipboardData.getData('text/html')html=awaitprocessWechatContent(html)// 替换公众号图片}}editor.insertContent(html||'未检测到可粘贴内容')document.body.removeChild(textarea)}}})})// 处理公众号内容（替换图片为OSS链接）asyncfunctionprocessWechatContent(html){constparser=newDOMParser()constdoc=parser.parseFromString(html,'text/html')constimgs=doc.querySelectorAll('img')for(constimgofimgs){if(img.src.includes('mp.weixin.qq.com')){// 伪代码：下载图片→上传OSS→替换链接constossUrl=awaituploadToOSS(img.src)img.src=ossUrl}}returndoc.body.innerHTML}

四、后端代码（ASP.NET WebForm）

// WordImportHandler.ashx（处理文件上传）publicclassWordImportHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentType="application/json";try{varfile=context.Request.Files[0];stringhtml="";// 根据文件类型调用不同解析器switch(Path.GetExtension(file.FileName).ToLower()){case".docx":html=ParseWordDocx(file.InputStream);break;case".xlsx":html=ParseExcelToTable(file.InputStream);break;case".pdf":html=ParsePdfToHtml(file.InputStream);break;// 其他格式处理...}// 处理公式（替换为MathJax标签）html=ProcessMathFormulas(html);// 上传图片到OSS（伪代码）html=UploadImagesToOSS(html);context.Response.Write(JsonConvert.SerializeObject(new{success=true,html=html}));}catch(Exceptionex){context.Response.Write(JsonConvert.SerializeObject(new{success=false,message=ex.Message}));}}// 解析Word文档（使用DocX库）privatestringParseWordDocx(Streamstream){using(vardoc=DocX.Load(stream)){varbuilder=newStringBuilder();foreach(varparaindoc.Paragraphs){builder.AppendLine($"{para.Text}");}returnbuilder.ToString();}}// 解析公式（伪代码）privatestringProcessMathFormulas(stringhtml){// 使用正则匹配MathType/Latex公式图片returnRegex.Replace(html,@"]+class=""math-formula""[^>]+src=""([^""]+)""",match=>$"$${GetLatexFromImage(match.Groups[1].Value)}$$");}}

五、部署攻略（穷鬼专用）

1. 前端部署：

   • 把编译后的tinymce-wordimport.js扔到/Scripts/plugins/
   • 在TinyMCE初始化配置中添加：

     plugins:'wordimport paste',toolbar:'wordimport | bold italic ...',external_plugins:{'wordimport':'/Scripts/plugins/tinymce-wordimport.js'}

2. 后端部署：

   • 在IIS中添加WordImportHandler.ashx通用处理程序
   • 配置阿里云OSS的AccessKey（建议用STS临时凭证）

3. 数据库：

   • 根本不需要改！所有图片URL存OSS，内容存HTML字段

六、QQ群暴富指南

1. 进群暗号：输入"680元暴富"领红包
2. 提成规则：
   • 推荐客户成交：提20%（比如680元订单直接拿136元）
   • 升级黄金会员：提50%（群主已疯，速来薅羊毛）
3. 今日群内福利：
   • 20:00 抽《ASP.NET从入门到精通》
   • 21:00 分享"如何让客户主动加预算"话术

群主语录：
“这年头，写代码不如搞推广！
你写3天代码赚680，
我发3条朋友圈赚6800，
这就是信息差的力量！”

（群号：223813913，速来，满员封群！）

复制插件

安装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转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片。

下载示例

点击下载完整示例