南宁网站建设排名怎么学平面设计啊

张

张建站

2026/4/11 4:39:28

10分钟阅读

南宁网站建设排名,怎么学平面设计啊,wordpress七牛不显示小图,wordpress 个性主题川式PHP程序员のCMS编辑器魔改日记#xff08;附红包代码#xff09; 一、需求辣评 “客户要Word一键粘贴#xff0c;还要保留MathType公式#xff01;”——这需求比让我用PHP写线程还魔幻#xff01;不过咱是谁#xff1f;川渝PHP裁缝王#xff0c;左手Vue3#xf…川式PHP程序员のCMS编辑器魔改日记附红包代码一、需求辣评“客户要Word一键粘贴还要保留MathType公式”——这需求比让我用PHP写线程还魔幻不过咱是谁川渝PHP裁缝王左手Vue3右手PHP怀里揣着wangEditor今天就要把Word粘贴功能整得比火锅还上头二、技术选型穷鬼豪华版前端Vue3 wangEditor免费版香得很后端PHP老板说不能换框架云存储阿里云OSS客户给的测试额度还没用完核心武器phpoffice/phpword解析Wordmathjax-node公式转MathMLsmallot/docx-parser备用方案三、前端插件开发Vue3骚操作// src/plugins/WordPastePlugin.jsexportdefault{install(editor){// 1. 工具栏加按钮比加香菜还简单editor.config.MENU_CONF[wordImport]{title:Word粘贴,icon:,click:()this.triggerWordImport()};// 2. 监听粘贴事件比偷吃回锅肉还刺激editor.config.pasteFilterStylefalse;editor.config.pasteIgnoreImgfalse;document.addEventListener(paste,async(e){if(e.clipboardData.files.length0){awaitthis.handleFileUpload(e.clipboardData.files[0]);}else{consthtmle.clipboardData.getData(text/html);if(html.includes(mso-))this.cleanWordGarbage(html);}});},asynccleanWordGarbage(dirtyHtml){// 用正则给Word的垃圾HTML洗剪吹比理发店Tony还狠constcleanHtmldirtyHtml.replace(//g, ).replace(/.*?\/o:p/g,).replace(/]*stylemso-[^]*/g,);// 调用后端处理公式MathJax接招constresawaitfetch(/api/convert-math,{method:POST,body:cleanHtml});this.editor.insertHTML(awaitres.text());},asynchandleFileUpload(file){constformDatanewFormData();formData.append(file,file);constresawaitfetch(/api/upload-word,{method:POST,body:formData});constdataawaitres.json();this.editor.insertHTML(data.html);}};四、PHP后端代码比串串香还热辣// api/upload-word.php - 处理Word文件getContent();// 3. 处理图片上传到OSS$ossClientnewOSS\OssClient(accessKeyId,accessKeySecret,endpoint);foreach($phpWord-getSections()as$section){foreach($section-getElements()as$element){if($elementinstanceof\PhpOffice\PhpWord\Element\Image){$imagePath/tmp/.uniqid()..jpg;file_put_contents($imagePath,$element-getImageStringData());$ossClient-uploadObject(bucket-name,images/.basename($imagePath),$imagePath);unlink($imagePath);}}}// 4. 返回干净HTML给前端下火锅echojson_encode([successtrue,htmlcleanWordHtml($dirtyHtml)]);}catch(Exception$e){echojson_encode([error$e-getMessage()]);}functioncleanWordHtml($html){// 删除Word垃圾标签比删前任微信还彻底$htmlpreg_replace(/]*.*?\/w:[^]*/,,$html);$htmlpreg_replace(/]*.*?\/o:[^]*/,,$html);return$html;}?// api/convert-math.php - 处理公式Error; function convertLaTeXToMathML($latex) { // 实际应该调用MathJax Node服务这里用假数据 return x2;}?五、部署攻略比点鸳鸯锅还快前端部署npmrun build# 把dist文件夹丢到Apache/Nginx目录后端部署上传PHP文件到服务器配置composer.json{require:{phpoffice/phpword:^0.18.0}}运行composer install阿里云OSS配置创建Bucketcms-bucket设置CORS规则允许你的域名六、QQ群暴富指南比买彩票靠谱新人福利加群喊PHP王到此一游领红包1-99元群文件有《PHP写微服务指南》《Vue3防脱发手册》躺赚攻略推荐客户成交20%提成680元项目136元红包升级黄金会员50%提成月入10万不是梦群文件有《客户话术模板.docx》照着念就能签单风险提示不要在群里发PHP是世界上最好的语言会被踢提成到账前别卸载支付宝防止群主跑路七、最终效果用户操作CtrlC → 点击Word粘贴 → 发布实际发生前端偷偷调用PHP接口PHP用PhpWord解析WordMathJax转换公式图片自动上传OSS返回纯净HTML给编辑器效果演示Emc² x-b2a Emc² x-b2a群号最后call223813913进群喊PHP王带飞领红包项目预算680元实际成本1包辣条2杯冰粉技术难度⭐⭐比用ThinkPHP简单赚钱难度⭐比在群里抢红包还简单提示代码已做脱敏处理实际使用时需替换阿里云OSS配置和MathJax服务地址。建议先在测试环境部署避免生产环境出现公式消失术等灵异事件。复制插件文件安装jquerynpm install jquery导入组件importEfromwangeditorconst{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}Eimport{WordPaster}from../../static/WordPaster/js/wimport{zyCapture}from../../static/zyCapture/zimport{zyOffice}from../../static/zyOffice/js/o初始化组件//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().UploadNetImg();}tryChangeActive(){this.active()}}exportdefault{name:HelloWorld,data(){return{msg:Welcome to Your Vue.js App}},mounted(){vareditornewE(#editor);WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,License2:,//为图片地址增加域名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:});zyCapture.getInstance({config:{PostUrl:http://localhost:8891/upload.aspx,License2:,FileFieldName:file,Fields:{uname:test},ImageUrl:http://localhost:8891{url}}})// zyoffice// 使用前请在服务端部署zyoffice// http://www.ncmem.com/doc/view.aspx?id82170058de824b5c86e2e666e5be319czyOffice.getInstance({word:http://localhost:13710/zyoffice/word/convert,wordExport:http://localhost:13710/zyoffice/word/export,pdf:http://localhost:13710/zyoffice/pdf/upload})// 注册菜单E.registerMenu(zyCaptureBtn,zyCaptureBtn)E.registerMenu(WordPasterBtn,WordPasterBtn)E.registerMenu(ImportWordToImgBtn,ImportWordToImgBtn)E.registerMenu(NetImportBtn,NetImportBtn)E.registerMenu(WordImportBtn,WordImportBtn)E.registerMenu(ExcelImportBtn,ExcelImportBtn)E.registerMenu(PPTImportBtn,PPTImportBtn)E.registerMenu(PDFImportBtn,PDFImportBtn)E.registerMenu(importWordBtn,importWordBtn)E.registerMenu(exportWordBtn,exportWordBtn)E.registerMenu(importPdfBtn,importPdfBtn)//挂载粘贴事件editor.txt.eventHooks.pasteEvents.length0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2newE(#editor2);//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length0;edt2.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(edt2).Paste();e.preventDefault();return;});edt2.create();}}h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color:#42b983;}测试前请配置图片上传接口并测试成功接口测试接口返回JSON格式参考为编辑器添加按钮components:{Editor,Toolbar},data(){return{editor:null,html:dd,toolbarConfig:{insertKeys:{index:0,keys:[zycapture,wordpaster,pptimport,pdfimport,netimg,importword,exportword,importpdf]}},editorConfig:{placeholder:},mode:default// or simple}},整合效果导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例