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

TinyMCE5支持CMS系统word图片压缩

news 2026/6/15 5:51:06

🚀【.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%，四舍五入等于白嫖！）

二、技术选型（穷鬼版）

组件免费替代方案备注
TinyMCE5开源版（社区插件）富文本编辑器本体
文档解析DocX（Word）+NPOI（Excel）开源库，处理Office文档
PDF解析iTextSharp（LGPL协议）商业使用需注意许可证
公式转换MathJax（前端渲染）Latex→MathML神器
阿里云OSS官方SDK（.NET版）免费额度够用小项目

三、前端代码（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转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片。
下载示例
点击下载完整示例





http://www.cnnetsun.cn/news/24112.html






相关文章：


  • 
TinyMCE4粘贴ppt幻灯片转存网页兼容

    • 

  • 
23、Linux Web服务器综合指南

    • 

  • 
3小时精通Halo仪表盘组件开发：从零到一的完整实战手册

    • 

  • 
Kali Linux 高级Web渗透测试工具全解析：构建专业级安全评估能力

    • 

  • 
湖泊数据在科研与工程中的应用

    • 

  • 
RDP Wrapper配置库完全使用指南：解锁Windows远程桌面全部潜能

    • 

  • 
官宣！TDengine 授权麦斯时代为钻石分销商，共筑工业数据新生态

    • 

  • 
亿欧 2025 AI 软件创新产品 Top10 出炉，时序数据库TDengine 入选

    • 

  • 
百度网盘秒传技术全解析：从零基础到效率达人的终极指南

    • 

  • 
OpenAI Whisper Large-V3-Turbo本地部署终极指南：从零搭建到性能调优

    • 

  • 
75、深入探索GDB调试器：命令详解与实用技巧

    • 

  • 
7 款热门文件加密软件深度测评！2025 加密工具最佳选择

    • 

  • 
Linux环境下的C语言编程（四十）

    • 

  • 
矮冬瓜矮砧密植：水肥一体化系统铺设全攻略

    • 

  • 
P11960 [GESP202503 五级] 平均分配

    • 

  • 
PINNs-Torch：实现9倍加速的物理信息神经网络框架

    • 

  • 
GPT-5.2发布！这些超强新功能，快来看看它是怎么让你的工作更轻松的！

    • 

  • 
ChromePass：三分钟掌握Chrome密码提取的终极指南

    • 

  • 
【方法】IP66.net：如何查到自己的IP？

    • 

  • 
南京大学开源SteadyDancer模型实现完美动作迁移，首帧保留彻底解决身份漂移难题

    • 

  • 
机器视觉相机参数

    • 

  • 
springboot基于vue的观赏鱼养殖互助商城系统的设计与实现_1vlf0334

    • 

  • 
压差式静力水准仪液体选择必看！从充液到排气：沉降监测系统安装全流程避雷手册

    • 

  • 
构建可靠数据库连接：人大金仓JDBC驱动8.6.0实战指南

    • 

  • 
嵌入式零基础到就业年班

    • 

  • 
如何快速提取Chrome密码：跨平台开源工具完整指南

    • 

  • 
5分钟掌握RichTextKit：SwiftUI富文本编辑器终极指南

    • 

  • 
如何有效准备编程竞赛？五个阶段科学备考方法

    • 

  • 
BG3模组管理器终极指南：5分钟快速上手博德之门3模组管理

    • 

  • 
6、黑客必备：Linux 网络技能与软件管理

    •