富文本框編輯器圖片復制粘貼上傳


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM