企业官网建设流程全解析

作为一名苦逼的大三软件工程狗，我来分享下Word转存功能的血泪史

各位老铁们好啊！我是一名来自重庆某高校的软件工程大三学生，最近在折腾一个CMS新闻管理系统的升级，特别是那个让人头秃的Word内容粘贴功能。下面我就来分享下我的探索历程和解决方案，希望能帮到和我一样在坑里挣扎的兄弟们！

功能需求分析

首先说说我这个项目的需求吧：

1. 要在TinyMCE编辑器加个按钮，支持Word/Excel/PPT/PDF内容粘贴
2. 粘贴后要保留所有样式（表格、字体、公式啥的）
3. 图片要自动上传到阿里云OSS
4. 公式要支持Latex转MathML，还要多终端高清显示
5. 预算只有99元（学生党穷啊！）

技术选型踩坑记

我试过一堆方案，这里给大家排排雷：

1. TinyMCE官方插件：贵的要死，直接pass
2. 各种开源库：要么功能不全，要么文档看不懂
3. 自己撸代码：试了一周，头发掉了不少，效果还稀烂

最后找到了一个性价比超高的方案——Mammoth.js+自定义插件，总花费：0元！白嫖真香！

完整解决方案

前端部分（Vue2）

首先安装依赖：

npminstallmammoth vue-tinymce tinymce

然后在组件中集成：

importtinymcefrom'tinymce/tinymce'import'tinymce/themes/silver'import'tinymce/plugins/paste'import'tinymce/plugins/image'importEditorfrom'@tinymce/tinymce-vue'import*asmammothfrom'mammoth'exportdefault{components:{'tinymce-editor':Editor},data(){return{content:'',editorInit:{height:500,menubar:false,plugins:'paste image',toolbar:'undo redo | formatselect | bold italic | alignleft aligncenter alignright | image',images_upload_handler:this.handleImageUpload}}},methods:{asynchandlePasteFromWord(){constinput=document.createElement('input')input.type='file'input.accept='.docx,.doc'input.onchange=asynce=>{constfile=e.target.files[0]constarrayBuffer=awaitfile.arrayBuffer()constresult=awaitmammoth.extractRawText({arrayBuffer})consthtml=awaitmammoth.convertToHtml({arrayBuffer})// 处理图片上传constprocessedHtml=awaitthis.processImages(html.value)this.content=processedHtml}input.click()},asyncprocessImages(html){// 这里用正则提取图片base64并上传到OSS// 返回替换后的HTMLreturnhtml.replace(/<img[^>]+src="data:image\/([^;]+);base64,([^"]+)"[^>]*>/g,async(match,ext,base64)=>{constimageUrl=awaitthis.uploadBase64Image(base64,ext)returnmatch.replace(`data:image/${ext};base64,${base64}`,imageUrl)})},asyncuploadBase64Image(base64,ext){// 这里实现上传到阿里云OSS的逻辑// 返回图片URLreturn'https://your-oss-bucket.oss-cn-shenzhen.aliyuncs.com/xxx.jpg'},handleImageUpload(blobInfo,success,failure){// TinyMCE图片上传处理constfile=blobInfo.blob()this.uploadToOSS(file).then(url=>{success(url)}).catch(err=>{failure('上传失败')})},asyncuploadToOSS(file){// 阿里云OSS上传实现// 返回图片URL}}}.word-paste-btn{margin-top:10px;padding:8px 16px;background:#1890ff;color:white;border:none;border-radius:4px;cursor:pointer;}

后端部分（PHP）

putObject($bucket,$filename,$data);$url="https://{$bucket}.{$endpoint}/{$filename}";echojson_encode(['url'=>$url]);exit;}// 处理普通文件上传if(isset($_FILES['file'])){$file=$_FILES['file'];$filename='uploads/'.uniqid().'.'.pathinfo($file['name'],PATHINFO_EXTENSION);$ossClient->uploadFile($bucket,$filename,$file['tmp_name']);$url="https://{$bucket}.{$endpoint}/{$filename}";echojson_encode(['url'=>$url]);exit;}thrownewException('无效的请求');}catch(OssException$e){http_response_code(500);echojson_encode(['error'=>$e->getMessage()]);}?>

公式处理方案

对于Latex公式转换，我推荐使用MathJax：

// 在TinyMCE初始化配置中加入 extended_valid_elements: 'math,annotation,menclose,merror,mfenced,mfrac,mfrac,mi,mmultiscripts,mn,mo,mover,mpadded,mphantom,mroot,mrow,ms,mscarries,mscarry,msgroup,mstack,msline,mspace,msqrt,msrow,mstyle,msub,msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,semantics', content_style: 'math {display: inline;}', setup: function(editor) { editor.on('init', function() { if (window.MathJax) { window.MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\$','\$']], displayMath: [['$$','$$'], ['\$$','\$$']], processEscapes: true }, "HTML-CSS": { availableFonts: ["TeX"], linebreaks: { automatic: true } } }); } }); }

部署注意事项

1. 跨域问题：记得在阿里云OSS设置CORS规则
2. 权限控制：使用STS临时凭证更安全
3. 性能优化：图片可以压缩后再上传
4. 错误处理：做好各种异常情况的处理

加入我们的技术交流群

兄弟们，一个人撸代码太苦了！我们建了个QQ群（223813913），里面有很多像我一样的苦逼开发者，大家互相帮助，分享开源项目和接单资源。新人加群还有红包哦！

群里最近搞了个代理商活动，推荐客户能拿20%提成。算笔账：

• 推1单1000元 = 200元到手
• 推10单 = 2000元
• 一个月推50单 = 1万元

比去公司996舒服多了！快来加入我们吧！

求职求内推

最后打个广告：有师兄师姐需要招人的吗？小弟我快毕业了，求个内推机会！熟悉Vue/PHP/MySQL，能吃苦耐劳，薪资要求不高，管饭就行！

希望能帮到有同样需求的兄弟，代码我都在实际项目用过，有问题随时群里交流！

复制插件

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

上传网络图片

一键自动上传网络图片。

下载示例

点击下载完整示例