浦城 建網(wǎng)站,學(xué)前心理學(xué)課程建設(shè)網(wǎng)站,專業(yè)的外貿(mào)行業(yè)網(wǎng)站制作,南京哪些公司做網(wǎng)站咱安徽程序員實錘了#xff01;最近接了個CMS外包活#xff0c;客戶是做企業(yè)官網(wǎng)的#xff0c;非要給后臺新聞編輯器加“文檔導(dǎo)入Word一鍵粘貼”功能——好家伙#xff0c;需求單寫著“要保留Word里的花里胡哨樣式#xff0c;圖片、公式、甚至MathType的鬼畫符都得給我原?！郯不粘绦騿T實錘了最近接了個CMS外包活客戶是做企業(yè)官網(wǎng)的非要給后臺新聞編輯器加“文檔導(dǎo)入Word一鍵粘貼”功能——好家伙需求單寫著“要保留Word里的花里胡哨樣式圖片、公式、甚至MathType的鬼畫符都得給我原模原樣塞進文章里高齡編輯用著得比我媽用微信視頻還順溜”。咱先捋捋客戶痛點他們編輯部有個大爺70歲的人打字比蝸牛爬發(fā)篇新聞得先在Word里搗鼓兩小時排版再復(fù)制粘貼到后臺結(jié)果圖片全亂碼公式變亂碼氣得大爺拍桌子“這破系統(tǒng)還不如我用鋼筆寫稿子” 所以客戶要的哪是功能是要“讓大爺也能輕松發(fā)新聞”的救命神器啊第一步摸透UEditor的“脾氣”咱前端用的是Vue3編輯器是百度那老古董UEditor——好處是文檔全壞處是擴展起來像拆盲盒。要在工具欄加按鈕行先改ueditor.config.js把“導(dǎo)入文檔”按鈕塞進去// ueditor.config.js 里加按鈕配置UE.Editor.prototype._bkGetActionUrlUE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrlfunction(action){if(actionuploadword||actionpastehtml){// 自定義接口return/api/editor/handleDoc;// 后端接口地址}else{returnthis._bkGetActionUrl.call(this,action);}};// 工具欄添加按鈕在toolbars數(shù)組里加toolbars:[[bold,italic,underline,insertimage,uploadword]// 新增uploadword按鈕]前端點擊按鈕后觸發(fā)文件選擇或粘貼事件。粘貼的話得監(jiān)聽paste事件把剪貼板里的Word內(nèi)容撈出來import { onMounted } from vue; const ue ref(null); onMounted(() { ue.value UE.getEditor(editor, { serverUrl: /api/editor/upload, // 原圖上傳接口 }); // 監(jiān)聽粘貼事件 ue.value.addListener(paste, (type, event) { const clipboardData event.clipboardData || window.clipboardData; if (clipboardData.items) { for (let i 0; i clipboardData.items.length; i) { const item clipboardData.items[i]; if (item.kind file item.type.startsWith(image/)) { // 處理粘貼的圖片后面講上傳OSS } else if (item.kind string) { // 處理文本內(nèi)容含樣式 item.getAsString((text) { ue.value.execCommand(insertHtml, text); // 直接插入帶樣式的HTML }); } } } }); // 自定義按鈕點擊事件上傳Word UE.registerUI(uploadword, (editor, uiName) { const btn new UE.ui.Button({ name: uiName, title: 導(dǎo)入Word/PPT/Excel, onclick: () { const input document.createElement(input); input.type file; input.accept .doc,.docx,.ppt,.pptx,.xls,.xlsx,.pdf; input.onchange async (e) { const file e.target.files[0]; if (file) { const formData new FormData(); formData.append(file, file); const res await fetch(/api/editor/handleDoc, { method: POST, body: formData, }); const html await res.json(); editor.execCommand(insertHtml, html.content); // 把解析后的內(nèi)容塞進編輯器 } }; input.click(); }, }); return btn; }); });第二步后端PHP“暴力”解析文檔前端搞定了后端得硬剛各種文檔格式?？蛻粢Ａ魣D片、公式咱得找個能“拆文檔”的庫——PhpWord能讀Word但Excel/PPT得用PhpSpreadsheet和PhpPresenterPDF用TCPDF或Smalot/pdfparser。不過最頭疼的是公式和樣式Word里的公式可能是圖片emz/wmz或者Latex得扒出來轉(zhuǎn)成MathML。先寫個接收文件的接口/api/editor/handleDoc// PHP后端接口publicfunctionhandleDoc(Request$request){$file$request-file(file);$ext$file-getClientOriginalExtension();$html;switch($ext){casedocx:$html$this-parseWord($file);break;casepdf:$html$this-parsePdf($file);break;// 其他格式類似...}// 圖片上傳OSS阿里云SDK$html$this-uploadImagesToOSS($html);// Latex轉(zhuǎn)MathML用LaTeXML工具$html$this-convertLatexToMathML($html);returnjson([code200,content$html]);}privatefunctionparseWord($file){requirevendor/autoload.php;// 引入Composer庫$phpWordPhpOfficePhpWordIOFactory::load($file-getPathname());$htmlWriternewPhpOfficePhpWordWriterHTML($phpWord);return$htmlWriter-getContent();// 這里能拿到帶樣式的HTML但公式可能丟失}圖片處理Word里的圖片會被解析成base64或臨時文件得上傳到OSS。用阿里云OSS SDK的話大概是這樣useOSSOssClient;useOSSCoreOssException;privatefunctionuploadImagesToOSS($html){$ossClientnewOssClient(AccessKeyId,AccessKeySecret,oss-cn-hangzhou.aliyuncs.com);$bucketyour-bucket;$pattern/ $base64) { $imageData base64_decode($base64); $object news-images/ . uniqid() . . . $matches[1][$index]; // OSS路徑 try { $ossClient-putObject($bucket, $object, $imageData); $html str_replace($matches[0][$index], srchttps://your-bucket.oss-cn-hangzhou.aliyuncs.com/ .$object. ,$html);}catch(OssException$e){error_log(上傳失敗.$e-getMessage());}}return$html;}Latex轉(zhuǎn)MathML用LaTeXML命令行工具得服務(wù)器裝或者用PHP庫latex2mathmlprivatefunctionconvertLatexToMathML($html){$latexPattern/$$(.*?)$/s;// 匹配$$...$$的Latex公式preg_replace_callback($latexPattern,function($matches){$latex$matches[1];$mathmlshell_exec(latexit -c {$latex});// 假設(shè)服務(wù)器裝了latexitreturn$mathml?{$mathml}:$matches[0];},$html);return$html;}第三步微信公眾號內(nèi)容“偷梁換柱”客戶還想要公眾號導(dǎo)入那簡單——公眾號復(fù)制的內(nèi)容自帶一堆冗余標簽比如咱寫個過濾函數(shù)privatefunctioncleanWechatHtml($html){$domnewDOMDocument();$dom-loadHTML(mb_convert_encoding($html,HTML-ENTITIES,UTF-8));// 移除無用標簽$xpathnewDOMXPath($dom);foreach($xpath-query(//span[contains(class, rich_media_meta)])as$node){$node-parentNode-removeChild($node);}// 保留關(guān)鍵樣式比如加粗、顏色foreach($xpath-query(//*[style])as$node){$style$node-getAttribute(style);$stylepreg_replace(/(font-family|line-height):[^;];?/,,$style);// 移除可能沖突的樣式$node-setAttribute(style,trim($style));}return$dom-saveHTML();}預(yù)算680塊夠不夠咱用的都是開源庫PhpWord、PhpSpreadsheet、阿里云OSS SDK服務(wù)器裝個LaTeXML工具免費前端Vue3改改按鈕后端PHP寫幾個解析函數(shù)——680塊夠買杯奶茶慶祝了要是客戶要更復(fù)雜的公式支持比如MathType最多花200塊買個商業(yè)解析庫剩下的錢還能給群里兄弟發(fā)紅包~最后群里喊一嗓子咱建的QQ群223813913新人進群送1-99元紅包推薦客戶提20%提成成交10單就是4萬提成比在廠里打螺絲香多了群里還有一堆技術(shù)大佬遇到問題甩個表情包分分鐘有人幫你解決~PS大爺看了咱的編輯器拍著大腿說“比我家那臺老電腦還順手”客戶當場簽了續(xù)單合同——這錢賺得值復(fù)制插件目錄引入插件文件UEditor 1.4.3.3示例注意不要重復(fù)引入jquery如果您的項目已經(jīng)引入了jq則不用再引入jq-1.4在工具欄中增加插件按鈕//工具欄上的所有的功能按鈕和下拉框可以在new編輯器的實例時選擇自己需要的重新定義toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos1),asp/upload.asp].join();WordPaster.getInstance({//上傳接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//為圖片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//設(shè)置文件字段名稱http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取圖片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});//加載控件注意如果接口字段名稱不是file請配置FileFieldName。ueditor接口中使用的upfile字段點擊查看詳細教程配置ImageMatch匹配圖片地址如果服務(wù)器返回的是JSON則需要通過正則匹配ImageMatch:,點擊參考鏈接配置ImageUrl為圖片地址增加域名如果服務(wù)器返回的圖片地址是相對路徑可通過此屬性添加自定義域名。ImageUrl:,點擊查看詳細教程配置SESSION如果接口有權(quán)限驗證登陸驗證SESSION驗證請配置COOKIE?；蛉∠麢?quán)限驗證。參考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果編輯器界面導(dǎo)入Word文檔,支持doc,docx導(dǎo)入Excel文檔,支持xls,xlsx粘貼Word一鍵粘貼Word內(nèi)容自動上傳Word中的圖片保留文字樣式。Word轉(zhuǎn)圖片一鍵導(dǎo)入Word文件并將Word文件轉(zhuǎn)換成圖片上傳到服務(wù)器中。導(dǎo)入PDF一鍵導(dǎo)入PDF文件并將PDF轉(zhuǎn)換成圖片上傳到服務(wù)器中。導(dǎo)入PPT一鍵導(dǎo)入PPT文件并將PPT轉(zhuǎn)換成圖片上傳到服務(wù)器中。上傳網(wǎng)絡(luò)圖片下載示例點擊下載完整示例