news 2026/6/23 11:58:50

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/6/23 3:56:18



当电机开始“唱歌“：NVH工程师的降噪日常


电机振动噪声NVH入门到精通
电磁 振动噪声模态
具有电磁解析机理振动噪声的步步深入，视频操作带你从入门到精通，适合在校学生学习和刚转化入职工程师学习。
Maxwell and Workbench某次测试中，一台新能源车的驱动电机在3000rpm时发出蜂鸣般的啸…






作者头像
李华















网站建设
2026/6/23 18:20:41



FPGA教程系列-Vivado Aurora 8B／10B 例程解读


FPGA教程系列-Vivado Aurora 8B／10B 例程解读1. 核心支撑层 (最重要，以后要抄作业的部分)
对应层级：  aurora_module_i : aurora_8b10b_0_support
这是整个工程的心脏。如果你要在自己的项目里使用 Aurora，不要直接例化那个  ​.x…






作者头像
李华














网站建设
2026/6/23 18:22:12



227827827


82872782






作者头像
李华














网站建设
2026/6/22 21:27:35



MCU的启动流程你了解么？


MCU（微控制器单元）的上电过程是一个精心设计的序列，它确保芯片从完全断电状态可靠地进入正常工作状态。1. 上电复位（Power-on Reset）当给MCU上电时，电源电压从0V开始上升至额定工作电压（如3.3V&…






作者头像
李华