網(wǎng)站建設(shè)方面的課程,品牌排名網(wǎng)站,網(wǎng)站維護(hù)費(fèi)用,百度指數(shù)如何分析數(shù)據(jù)《Word一鍵轉(zhuǎn)存歷險(xiǎn)記#xff1a;一個(gè)窮學(xué)生的CMS升級(jí)之路》 尋找解決方案的奇幻旅程 第一天#xff1a;初探Word粘貼黑科技 作為一名福建某高校的計(jì)科大三狗#xff08;啊不是#xff0c;學(xué)生#xff09;#xff0c;我正在給我的CMS新聞管理系統(tǒng)做升級(jí)。需求很簡(jiǎn)單一個(gè)窮學(xué)生的CMS升級(jí)之路》尋找解決方案的奇幻旅程第一天初探Word粘貼黑科技作為一名福建某高校的計(jì)科大三狗啊不是學(xué)生我正在給我的CMS新聞管理系統(tǒng)做升級(jí)。需求很簡(jiǎn)單才怪讓用戶能從Word一鍵粘貼內(nèi)容還能自動(dòng)上傳圖片到我的阿里云OSS同時(shí)保留所有花里胡哨的格式開(kāi)始在網(wǎng)上瘋狂搜索“Word粘貼保留格式”、“KindEditor圖片自動(dòng)上傳”…“免費(fèi)”是我的關(guān)鍵詞畢竟預(yù)算只有99元連頓像樣的火鍋都吃不起。發(fā)現(xiàn)1CKEditor有Paste from Word插件但要付費(fèi)錢包在哭泣發(fā)現(xiàn)2TinyMCE貌似支持但集成到KindEditor要魔改我太難了發(fā)現(xiàn)3國(guó)內(nèi)某個(gè)叫WangEditor的文檔全是中文感動(dòng)但功能有限柳暗花明又一村在GitHub上挖到寶藏了一個(gè)叫mammoth.js的開(kāi)庫(kù)可以把Word轉(zhuǎn)HTML還能處理圖片// 前端示例代碼 - 使用mammoth.js處理Word文檔importmammothfrommammoth;functionhandleWordFile(file){constreadernewFileReader();reader.onloadfunction(event){constarrayBufferevent.target.result;mammoth.extractRawText({arrayBuffer:arrayBuffer}).then(function(result){// 獲取純文本lettextresult.value;// 處理圖片letimagesresult.messages.filter(mm.typeimage).map(imguploadImageToOSS(img));// 自定義上傳函數(shù)}).catch(function(error){console.error(error);});};reader.readAsArrayBuffer(file);}后端PHP處理大冒險(xiǎn)既然前端能解析Word了后端要負(fù)責(zé)把圖片傳到OSS// PHP后端處理圖片上傳到阿里云OSSuseOSSOssClient;useOSSCoreOssException;functionuploadToOSS($imageData,$fileName){$accessKeyId您的AccessKeyId;$accessKeySecret您的AccessKeySecret;$endpoint您的Endpoint;$bucket您的Bucket;try{$ossClientnewOssClient($accessKeyId,$accessKeySecret,$endpoint);$result$ossClient-putObject($bucket,news/.$fileName,$imageData);return$result[info][url];}catch(OssException$e){error_log(OSS上傳失敗: .$e-getMessage());returnfalse;}}KindEditor魔改計(jì)劃KindEditor默認(rèn)不支持這么高級(jí)的功能得給它動(dòng)手術(shù)// 在KindEditor初始化時(shí)添加自定義按鈕KindEditor.plugin(wordpaste,function(K){vareditorthis;editor.clickToolbar(wordpaste,function(){// 創(chuàng)建隱藏的file inputvarinputdocument.createElement(input);input.typefile;input.accept.doc,.docx;input.onchangefunction(e){handleWordFile(e.target.files[0],function(html){editor.insertHtml(html);});};input.click();});});踩坑記錄與突破Word公式處理MathType公式簡(jiǎn)直是大BOSS最終用html-to-docx庫(kù)把公式轉(zhuǎn)成圖片解決樣式保留發(fā)現(xiàn)直接粘貼會(huì)丟失樣式改用mammoth.js的convertToHtml方法并自定義樣式映射跨平臺(tái)兼容在Linux服務(wù)器上GD庫(kù)沒(méi)安裝導(dǎo)致圖片處理失敗熬夜到凌晨3點(diǎn)才解決成果展示經(jīng)過(guò)兩周的奮戰(zhàn)和無(wú)數(shù)杯速溶咖啡我的CMS現(xiàn)在可以? Word一鍵粘貼保留格式? 圖片自動(dòng)上傳到OSS? 支持表格、公式等復(fù)雜內(nèi)容? 跨平臺(tái)兼容性良好全部花費(fèi)0元感謝開(kāi)源社區(qū)省下的99元可以吃頓好的了致同行的小伙伴如果你也在做類似的功能歡迎加入我們的接單交流群QQ群223813913。我們可以分享開(kāi)發(fā)經(jīng)驗(yàn)接外包項(xiàng)目吐槽坑爹的需求互相安利好用的工具庫(kù)最后送上學(xué)長(zhǎng)的忠告遇到技術(shù)難題不要慌先喝杯奶茶壓壓驚然后去GitHub、StackOverflow上找找答案總比問(wèn)題多上傳工具欄插件文件夾上傳插件文件夾控件初始化在head中引入組件文件注意不要重復(fù)引入jquery如果您的頁(yè)面已經(jīng)引入了jquery這里就不要再引入jquery 1.4了。WordPaster For KindEditor-4.x # 初始化組件 WordPaster.getInstance({ui:{render:wdpst}//目標(biāo)容器一般為div});設(shè)置快捷鍵將插件添加到工具欄并掛載KindEditor的CtrlV快捷鍵事件vareditor;KindEditor.ready(function(K){editorK.create(#content1,{items:[wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf,|],afterCreate:function(){WordPaster.getInstance().SetEditor(this);varselfthis;//自定義 Ctrl V 事件。KindEditor.ctrl(self.edit.doc,V,function(){WordPaster.getInstance().Paste();});}});});注意1.如果接口字段名稱不是file請(qǐng)配置FileFieldName。點(diǎn)擊查看教程2.如果接口返回JSON請(qǐng)配置ImageMatch點(diǎn)擊查看教程3.如果接口返回的圖片地址沒(méi)有域名請(qǐng)配置ImageUrl點(diǎn)擊查看教程整合效果效果編輯器界面導(dǎo)入Word文檔,支持doc,docx導(dǎo)入Excel文檔,支持xls,xlsx粘貼Word一鍵粘貼Word內(nèi)容自動(dòng)上傳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ò)圖片示例下載下載完整示例