1. 程式人生 > 其它 >ckeditor貼上word圖片且圖片自動上傳程式碼

ckeditor貼上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倍呀。

圖片上傳後儲存在伺服器端。而且也可以指定上傳介面地址,這個也比較方便。因為我們的業務是將圖片儲存在單獨的雲端儲存伺服器中。

3、處理ueditor提供的uploadimage方法

客戶已經使用半年,沒有問題,非常有用,非常方便的功能

討論群:223813913