news 2026/5/31 2:16:53

TinyMCE6处理微信公众号音频视频嵌入

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TinyMCE6处理微信公众号音频视频嵌入

【穷学生开发手记】99元预算搞定TinyMCE的Word图片转存+全终端公式渲染，顺便恰饭搞接单群

一、需求拆解：穷学生的“既要又要还要”

作为江苏某软件学院大三“卷王”，最近在给自己的CMS新闻系统升级，需求如下：

  1. 核心功能：
    • TinyMCE编辑器加按钮，支持Word粘贴，图片自动上传阿里云OSS（别问为啥不用本地存储，穷）。
    • 保留Word里的表格、字体、颜色、LaTeX公式（转MathML）、MathType公式（图片形式也要保留）。
    • 支持Word/Excel/PPT/PDF导入，样式和图片全保留（导师说“丑系统不给分”）。
  2. 技术约束：
    • 前端：Vue2（马上升级Vue3，但不想重构）。
    • 后端：PHP（用Zend Studio写，导师说“PHP是世界上最好的语言”）。
    • 服务器：阿里云ECS（用自己的电脑当测试机，电费都快交不起了）。
    • 预算：99元（一顿火锅钱，但能买200包辣条）。
  3. 社交需求：
    • 找个接单群，顺便让师哥师姐内推（毕业即失业警告⚠️）。
    • 建个QQ群（223813913），新人加群领1~99元红包（钱不多，图个乐）。
二、开源组件筛选：白嫖党的狂欢
1. TinyMCE插件选型
  • 目标：找个能解析Word内容、自动上传图片到OSS的插件。
  • 候选方案：
    • tiny-mce-plugin-paste-office（免费）：
      • 优点：支持Office粘贴，但图片需手动处理。
    • 自定义插件（穷人最终方案）：
      • 用TinyMCE的paste和file_picker_callbackAPI，结合后端PHP处理图片上传。
2. LaTeX公式转MathML
  • 方案：
    • 前端用MathJax渲染（但多端兼容性差）。
    • 后端用Pandoc转MathML（PHP调用Pandoc命令行，穷但有效）。
3. 文件导入（Word/Excel/PPT/PDF）
  • 方案：
    • PHPWord（Word解析）。
    • PHPExcel（Excel解析）。
    • PHP-PPTX（PPT解析）。
    • PDFParser（PDF解析）。
    • 统一处理：解析后提取HTML和图片，图片上传OSS，HTML塞进TinyMCE。
三、开发过程：从0到1的骚操作
1. 前端：Vue2 + TinyMCE定制插件
  • 步骤1：安装TinyMCE和基础插件：
    npminstall@tinymce/tinymce-vue
  • 步骤2：自定义插件（wordpaste.js）：
    tinymce.PluginManager.add('wordpaste',function(editor){editor.on('paste',function(e){consthtml=e.clipboardData.getData('text/html');if(html&&html.includes('word-content')){// 提取图片Base64，传给后端换OSS URLconstimages=html.match(/]+src="data:image[^>]+>/g)||[];images.forEach(img=>{constbase64=img.match(/src="data:image([^;]+);base64,([^"]+)/);if(base64){// 调用后端API上传图片fetch('/api/upload-oss',{method:'POST',body:JSON.stringify({base64:base64[2]})}).then(res=>res.json()).then(data=>{// 替换Base64为OSS URLconstnewHtml=html.replace(img,img.replace(base64[0],`src="${data.url}"`));editor.insertContent(newHtml);});}});}});});
  • 步骤3：在Vue中集成：
2. 后端：PHP处理图片上传和公式转换
  • 图片上传到OSS：
    // upload-oss.php$base64=$_POST['base64'];$imageData=base64_decode(preg_replace('#^data:image/\w+;base64,#i','',$base64));$ossClient=newOSS\OssClient('key','secret','endpoint');$ossClient->putObject('bucket','images/'.uniqid().'.png',$imageData);echojson_encode(['url'=>'https://bucket.oss-cn-hangzhou.aliyuncs.com/images/xxx.png']);
  • LaTeX转MathML（Pandoc调用）：
    // latex-to-mathml.php$latex=$_POST['latex'];$mathml=shell_exec("echo '$latex' | pandoc -f latex -t mathml");echo$mathml;
3. 文件导入（Word示例）
  • 前端调用PHPWord解析：
    // 用户上传Word文件后constformData=newFormData();formData.append('file',file);fetch('/api/import-word',{method:'POST',body:formData}).then(res=>res.json()).then(data=>{tinymce.activeEditor.setContent(data.html);});
  • 后端PHPWord解析：
    // import-word.phprequire_once'PHPWord/autoload.php';$phpWord=\PhpOffice\PhpWord\IOFactory::load($_FILES['file']['tmp_name']);$htmlWriter=new\PhpOffice\PhpWord\Writer\HTML($phpWord);$html=$htmlWriter->getContent();// 提取图片并上传OSS（同上）echojson_encode(['html'=>$html]);
四、成果展示：穷学生的“豪华”系统
  1. Word粘贴效果：
    • 表格、字体、颜色全保留。
    • 图片自动上传OSS，替换为URL。
  2. LaTeX公式渲染：
    • PC/手机/平板全终端高清显示（MathML的功劳）。
  3. 文件导入：
    • Word/Excel/PPT/PDF都能导，样式不乱。
五、恰饭时间：接单群和内推
  1. QQ群：223813913
    • 新人加群领1~99元红包（钱不多，但能买几包辣条）。
    • 推荐客户提20%（比如成交1000元，你拿200元，躺着赚钱）。
  2. 内推需求：
    • 师哥师姐看看我！会写PHP/Vue/Java，能扛996，求内推！
最后一句骚话：
“穷学生的代码，不是写出来的，是薅羊毛薅出来的！”
（群号再发一遍：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转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片。
下载示例
点击下载完整示例









版权声明:

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！













网站建设
2026/5/31 5:31:13



基于java的SpringBoot/SSM+Vue+uniapp的四六级学习资料管理系统的详细设计和实现(源码+lw+部署文档+讲解等)


文章目录 前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus 系统测试系统测试目的系统功能测试系统测试结论 为什么选择我代码参考数据库参考源码获取 前言 
🌞博主介绍：✌全网粉丝15W,CSDN特邀作者、211毕业、高…






作者头像
李华














网站建设
2026/5/31 5:32:02



Flutter深度实战：从原理到进阶的跨平台开发全攻略


Flutter深度实战：从原理到进阶的跨平台开发全攻略 
一、引言：为什么选择Flutter？ 
在移动开发领域，开发者长期面临两大痛点：原生开发成本高（需同时维护Android/iOS两套代码）和跨平台方案性能不足…






作者头像
李华














网站建设
2026/5/31 0:48:55



14、psad：检测与防范网络可疑流量


psad：检测与防范网络可疑流量  1. 不同扫描类型的特征与检测  1.1 TCP 选项特征  在 Nmap SYN 扫描中，TCP 报头的选项部分显著缩短。它通常仅使用一个选项，即最大段大小（Maximum Segment Size），并将其设置为 1460。而大多数真实的 TCP 栈除最大段大小外，还会发送多个选项…






作者头像
李华














网站建设
2026/5/30 23:39:45



21、深入解析Snort规则转换为iptables规则及fwsnort部署


深入解析Snort规则转换为iptables规则及fwsnort部署  1. 不支持的Snort规则选项  虽然iptables能在很大程度上模拟Snort规则语言，但仍有许多Snort选项在iptables中没有很好的等效项。部分选项可通过iptables的u32扩展模拟，待u32扩展移植到2.6内核后，fwsnort的后续版本将支持…






作者头像
李华














网站建设
2026/5/31 1:38:38



next-ai-draw-io：下一代AI辅助的Draw.io图表绘制神器


在AI技术重塑应用格局的时代，智能图表绘制工具正逐渐成为技术文档编写、系统设计与团队协作中不可或缺的利器。过去我常使用 draw.io 制作图表，而最近在 GitHub 上发现了一个为 draw.io 集成 AI 能力的项目——这无疑是为这款工具插上了智能的翅膀。今天…






作者头像
李华














网站建设
2026/5/29 21:02:14



AI依赖对学生学习影响的量化评估研究框架


个人首页： VON  鸿蒙系列专栏： 鸿蒙开发小型案例总结  综合案例 ：鸿蒙综合案例开发  鸿蒙6.0：从0开始的开源鸿蒙6.0.0  鸿蒙5.0：鸿蒙5.0零基础入门到项目实战  本文章所属专栏：《AI从0到1：普通人…






作者头像
李华