企业官网建设流程全解析

十堰网站建设专家,wordpress 搭建教程 pdf,wordpress分辨率,达州网络推广作为一名苦逼的大三软件工程狗#xff0c;我来分享下Word转存功能的血泪史 各位老铁们好啊#xff01;我是一名来自重庆某高校的软件工程大三学生#xff0c;最近在折腾一个CMS新闻管理系统的升级#xff0c;特别是那个让人头秃的Word内容粘贴功能。下面我就来分享下我的探…作为一名苦逼的大三软件工程狗我来分享下Word转存功能的血泪史各位老铁们好啊我是一名来自重庆某高校的软件工程大三学生最近在折腾一个CMS新闻管理系统的升级特别是那个让人头秃的Word内容粘贴功能。下面我就来分享下我的探索历程和解决方案希望能帮到和我一样在坑里挣扎的兄弟们功能需求分析首先说说我这个项目的需求吧要在TinyMCE编辑器加个按钮支持Word/Excel/PPT/PDF内容粘贴粘贴后要保留所有样式表格、字体、公式啥的图片要自动上传到阿里云OSS公式要支持Latex转MathML还要多终端高清显示预算只有99元学生党穷啊技术选型踩坑记我试过一堆方案这里给大家排排雷TinyMCE官方插件贵的要死直接pass各种开源库要么功能不全要么文档看不懂自己撸代码试了一周头发掉了不少效果还稀烂最后找到了一个性价比超高的方案——Mammoth.js自定义插件总花费0元白嫖真香完整解决方案前端部分Vue2首先安装依赖npminstallmammoth vue-tinymce tinymce然后在组件中集成importtinymcefromtinymce/tinymceimporttinymce/themes/silverimporttinymce/plugins/pasteimporttinymce/plugins/imageimportEditorfromtinymce/tinymce-vueimport*asmammothfrommammothexportdefault{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(){constinputdocument.createElement(input)input.typefileinput.accept.docx,.docinput.onchangeasynce{constfilee.target.files[0]constarrayBufferawaitfile.arrayBuffer()constresultawaitmammoth.extractRawText({arrayBuffer})consthtmlawaitmammoth.convertToHtml({arrayBuffer})// 处理图片上传constprocessedHtmlawaitthis.processImages(html.value)this.contentprocessedHtml}input.click()},asyncprocessImages(html){// 这里用正则提取图片base64并上传到OSS// 返回替换后的HTMLreturnhtml.replace(/img[^]srcdata:image\/([^;]);base64,([^])[^]*/g,async(match,ext,base64){constimageUrlawaitthis.uploadBase64Image(base64,ext)returnmatch.replace(data:image/${ext};base64,${base64},imageUrl)})},asyncuploadBase64Image(base64,ext){// 这里实现上传到阿里云OSS的逻辑// 返回图片URLreturnhttps://your-oss-bucket.oss-cn-shenzhen.aliyuncs.com/xxx.jpg},handleImageUpload(blobInfo,success,failure){// TinyMCE图片上传处理constfileblobInfo.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;}后端部分PHPputObject($bucket,$filename,$data);$urlhttps://{$bucket}.{$endpoint}/{$filename};echojson_encode([url$url]);exit;}// 处理普通文件上传if(isset($_FILES[file])){$file$_FILES[file];$filenameuploads/.uniqid()...pathinfo($file[name],PATHINFO_EXTENSION);$ossClient-uploadFile($bucket,$filename,$file[tmp_name]);$urlhttps://{$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 } } }); } }); }部署注意事项跨域问题记得在阿里云OSS设置CORS规则权限控制使用STS临时凭证更安全性能优化图片可以压缩后再上传错误处理做好各种异常情况的处理加入我们的技术交流群兄弟们一个人撸代码太苦了我们建了个QQ群223813913里面有很多像我一样的苦逼开发者大家互相帮助分享开源项目和接单资源。新人加群还有红包哦群里最近搞了个代理商活动推荐客户能拿20%提成。算笔账推1单1000元 200元到手推10单 2000元一个月推50单 1万元比去公司996舒服多了快来加入我们吧求职求内推最后打个广告有师兄师姐需要招人的吗小弟我快毕业了求个内推机会熟悉Vue/PHP/MySQL能吃苦耐劳薪资要求不高管饭就行希望能帮到有同样需求的兄弟代码我都在实际项目用过有问题随时群里交流复制插件安装jquerynpm install jquery在组件中引入// 引入tinymce-vueimportEditorfromtinymce/tinymce-vueimport{WordPaster}from../../static/WordPaster/js/wimport{zyOffice}from../../static/zyOffice/js/oimport{zyCapture}from../../static/zyCapture/z添加工具栏//添加导入excel工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1function(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;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1function(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;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1function(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;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1function(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;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1function(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;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1function(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;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);varicohttp://localhost:8080/static/WordPaster/plugin/word.pngfunctionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1function(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 visualcharsdefault:autoresize code autolink autosave image imagetools paste preview table powertables},点击查看在线代码初始化组件// 初始化WordPaster.getInstance({// 上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,// 为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},// 设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,// 提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:})在页面中引入组件功能演示编辑器在编辑器中增加功能按钮导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片。下载示例点击下载完整示例