企业官网建设流程全解析

设计的网站,网站设计 分辨率,北京哪家做网站好,舆情报告案例2022【PHP码农の逆袭】680元预算用PHP硬刚Office文档导入#xff01;甲方爸爸直呼“真香” 一、甲方爸爸的“离谱”需求 作为江苏某外包公司“扛把子”PHP程序员#xff0c;最近接了个CMS官网项目#xff0c;甲方需求堪称“离谱但合理”#xff1a; 核心功能#xff1a; Tin…【PHP码农の逆袭】680元预算用PHP硬刚Office文档导入甲方爸爸直呼“真香”一、甲方爸爸的“离谱”需求作为江苏某外包公司“扛把子”PHP程序员最近接了个CMS官网项目甲方需求堪称“离谱但合理”核心功能TinyMCE编辑器加按钮支持Word/Excel/PPT/PDF一键导入保留字体、颜色、表格、公式LaTeX/MathType、形状组甚至EMZ/WMZ这种“上古”格式。Word粘贴直接复制Word内容到编辑器图片自动上传阿里云OSS。公众号内容导入甲方说“领导只会从公众号复制不会排版”。公式渲染LaTeX转MathML多终端PC/手机/平板/小程序/APP高清显示。技术约束前端Vue2 TinyMCE甲方说“别升级Vue3怕兼容性问题”。后端PHP用Zend Studio开发甲方说“经典技术栈安全”。数据库MySQL存储文章元数据图片存OSS。服务器阿里云ECS公有云私有云混合部署甲方说“安全第一”。预算680元甲方说“这是最后报价再砍价就找大学生做了”。社交需求建个QQ群223813913新人加群领1~99元红包钱不多图个热闹。搞代理商机制推荐客户提20%比如成交1万你拿2000元甲方爸爸的预算就是我的提成了。二、开源组件筛选PHP白嫖党的自我修养1. TinyMCE插件选型目标找个能解析Office文档、自动上传图片到OSS的插件。候选方案tiny-mce-plugin-powerpaste商业插件试用版免费优点支持Word粘贴图片自动上传但LaTeX公式支持差。自定义插件穷人最终方案用TinyMCE的paste和file_picker_callbackAPI结合PHP处理文档解析和图片上传。2. 公式处理LaTeX转MathML前端用MathJax但多端兼容性差。后端用PHP调用Pandoc通过exec()执行命令行穷但有效。MathType公式识别图片格式如EMZ/WMZ用PHP转PNG后上传OSS。3. 文件导入Word/Excel/PPT/PDF方案PHPWord解析Word/DOCX。PHPExcel/PHPOffice解析Excel。PHPPresentation解析PPTX。TCPDF/FPDI解析PDF。统一处理解析后提取HTML和图片图片上传OSSHTML塞进TinyMCE。三、开发过程PHP码农的“暴力”编码1. 前端Vue2 TinyMCE定制插件步骤1安装TinyMCE和基础插件npminstalltinymce/tinymce-vue步骤2自定义插件office-import.jstinymce.PluginManager.add(office-import,function(editor){editor.ui.registry.addButton(office-import,{text:导入文档,onAction:(){constinputdocument.createElement(input);input.typefile;input.accept.docx,.xlsx,.pptx,.pdf;input.onchangeasync(e){constfilee.target.files[0];constformDatanewFormData();formData.append(file,file);constresawaitfetch(/api/import-office.php,{method:POST,body:formData});constdataawaitres.json();editor.setContent(data.html);};input.click();}});});步骤3在Vue中集成2. 后端PHP处理文档解析和图片上传图片上传到OSS// upload_to_oss.php$base64$_POST[base64];$imageDatabase64_decode(explode(,,$base64)[1]);$ossClientnewAliyun\OSS\OssClient(endpoint,key,secret);$objectimages/.uniqid()..png;$ossClient-putObject(bucket,$object,$imageData);echojson_encode([urlhttps://bucket.oss-cn-hangzhou.aliyuncs.com/{$object}]);LaTeX转MathMLPandoc调用// latex_to_mathml.php$latex$_POST[latex];$mathmlshell_exec(echo {$latex} | pandoc -f latex -t mathml);echo$mathml;Word解析PHPWord示例// import_office.phprequirevendor/autoload.php;$file$_FILES[file][tmp_name];if(pathinfo($_FILES[file][name],PATHINFO_EXTENSION)docx){$phpWord\PhpOffice\PhpWord\IOFactory::load($file);$htmlWriternew\PhpOffice\PhpWord\Writer\HTML($phpWord);$html$htmlWriter-getContent();// 提取图片并上传OSS同上echojson_encode([html$html]);}// 其他格式Excel/PPT/PDF类似处理3. 公众号内容处理前端调用// 用户从公众号复制内容后调用此函数functioncleanWechatContent(html){// 移除公众号冗余标签如wx-tagreturnhtml.replace(/]*|\/wx-tag/g,);}后端处理用DOMDocument清理无效标签保留样式。四、成果展示甲方爸爸的“真香”现场Word粘贴效果表格、字体、颜色全保留。图片自动上传OSS替换为URL。公式渲染PC/手机/平板全终端高清显示MathML的功劳。文件导入Word/Excel/PPT/PDF都能导样式不乱。五、恰饭时间接单群和内推QQ群223813913新人加群领1~99元红包钱不多但能买几杯奶茶。推荐客户提20%比如成交1万你拿2000元甲方爸爸的预算就是我的提成了。内推需求兄弟们看看我会写PHP/Vue/Java能扛996求内推最后一句暴躁发言“680元做全功能甲方爸爸以为我是用爱发电群号再发一遍223813913进群送红包不送是狗”复制插件安装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转换成图片上传到服务器中。上传网络图片一键自动上传网络图片。下载示例点击下载完整示例