編輯支援word内容和截圖的複制黏貼
Chrome+IE預設支援粘貼剪切闆中的圖檔,但是我要釋出的文章存在word裡面,圖檔多達數十張,我總不能一張一張複制吧?
Chrome高版本提供了可以将單張圖檔轉換在BASE64字元串的功能。但是無法處理多張圖檔。而且轉換成BASE64後是作為内容一起送出給伺服器,不能夠将圖檔單獨儲存在另外一台伺服器中。如果需要單獨儲存則需要自已進行處理。比較麻煩。
我希望打開Word或者WPS文檔後,複制内容然後直接粘貼到富文本編輯器中,編輯器自動将圖檔批量上傳到伺服器中,無論文檔中有多少張圖檔,編輯器都全部自動上傳,不需要再手動一張張處理。同時能夠将圖檔上傳到我指定的接口中,伺服器需要将圖檔單獨儲存在存儲伺服器中,比如可能是雲存儲,或者是分布式存儲,最後直接釋出内容。
感覺這個似乎很困難,因為Ueditor本身不支援,粘貼後直接就是空白,這裡面一定有原因。
好,開始嘗試UMeditor,Chrome隻能獲得本地路徑,無法讀取檔案。
https://ueditor.baidu.com/website/umeditor.html(有興趣可以試試)
難道就這麼失敗了?
不,但是我意外發現UMeditor竟然支援粘貼word中的多張圖檔(僅支援IE11,不支援IE10以下版本、以及Chrome等)
切換HTML,會看到你的圖檔被組織成base64
nice,機會來了,既然IE支援複制word中的多張圖檔直接粘貼base64,既然有了base64我們就有辦法上傳轉圖檔啦!
那麼我們來改造Ueditor,讓他支援IE11(總比沒得用強吧)
打開你的ueditor.all.js(1.4.3版本以下行号根據自己使用的版本可能不同)
1、注釋掉14679行(暫時不明确有什麼不良影響)
//執行預設的處理
//me.filterInputRule(root);
2、在28725行插入以下代碼(如果是使用IE11粘貼會得到base64,先用占位符占位,再逐個把base64專成Blob檔案并上傳,上傳完成再替換為你的img屬性src為伺服器圖檔url)
服務端上傳代碼
處理後的效果,能夠批量上傳word中所有的圖檔,真的是太友善了。無論多少張圖檔都可以一次性批量上傳。這個功能真的是太友善了,大幅度提升了内容編輯人員的效率。以前一天隻能釋出一篇文章,現在能夠釋出100篇,這效率簡直提升了100倍呀。
圖檔上傳後儲存在伺服器端。而且也可以指定上傳接口位址,這個也比較友善。因為我們的業務是将圖檔儲存在單獨的雲存儲伺服器中。