企业官网建设流程全解析

【穷学生开发手记】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转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片。

下载示例

点击下载完整示例