Chrome+IE默認(rèn)支持粘貼剪切板中的圖片亡问,但是我要發(fā)布的文章存在word里面菱属,圖片多達(dá)數(shù)十張,我總不能一張一張復(fù)制吧驼鹅?
Chrome高版本提供了可以將單張圖片轉(zhuǎn)換在BASE64字符串的功能微谓。但是無(wú)法處理多張圖片。而且轉(zhuǎn)換成BASE64后是作為內(nèi)容一起提交給服務(wù)器输钩,不能夠?qū)D片單獨(dú)保存在另外一臺(tái)服務(wù)器中豺型。如果需要單獨(dú)保存則需要自已進(jìn)行處理。比較麻煩买乃。
我希望打開Word或者WPS文檔后姻氨,復(fù)制內(nèi)容然后直接粘貼到富文本編輯器中,編輯器自動(dòng)將圖片批量上傳到服務(wù)器中剪验,無(wú)論文檔中有多少?gòu)垐D片肴焊,編輯器都全部自動(dòng)上傳前联,不需要再手動(dòng)一張張?zhí)幚怼M瑫r(shí)能夠?qū)D片上傳到我指定的接口中娶眷,服務(wù)器需要將圖片單獨(dú)保存在存儲(chǔ)服務(wù)器中似嗤,比如可能是云存儲(chǔ),或者是分布式存儲(chǔ)届宠,最后直接發(fā)布內(nèi)容烁落。
感覺這個(gè)似乎很困難,因?yàn)閁editor本身不支持豌注,粘貼后直接就是空白伤塌,這里面一定有原因。
好轧铁,開始嘗試UMeditor寸谜,Chrome只能獲得本地路徑,無(wú)法讀取文件属桦。
https://ueditor.baidu.com/website/umeditor.html(有興趣可以試試)
難道就這么失敗了熊痴?
不,但是我意外發(fā)現(xiàn)UMeditor竟然支持粘貼word中的多張圖片(僅支持IE11聂宾,不支持IE10以下版本果善、以及Chrome等)
切換HTML,會(huì)看到你的圖片被組織成base64?
nice系谐,機(jī)會(huì)來(lái)了巾陕,既然IE支持復(fù)制word中的多張圖片直接粘貼base64,既然有了base64我們就有辦法上傳轉(zhuǎn)圖片啦纪他!
那么我們來(lái)改造Ueditor鄙煤,讓他支持IE11(總比沒得用強(qiáng)吧)
打開你的ueditor.all.js(1.4.3版本以下行號(hào)根據(jù)自己使用的版本可能不同)
1、注釋掉14679行(暫時(shí)不明確有什么不良影響)
//執(zhí)行默認(rèn)的處理
//me.filterInputRule(root);
2茶袒、在28725行插入以下代碼(如果是使用IE11粘貼會(huì)得到base64梯刚,先用占位符占位,再逐個(gè)把base64專成Blob文件并上傳薪寓,上傳完成再替換為你的img屬性src為服務(wù)器圖片url)
服務(wù)端上傳代碼
處理后的效果亡资,能夠批量上傳word中所有的圖片斋日,真的是太方便了伊诵。無(wú)論多少?gòu)垐D片都可以一次性批量上傳。這個(gè)功能真的是太方便了性芬,大幅度提升了內(nèi)容編輯人員的效率母谎。以前一天只能發(fā)布一篇文章瘦黑,現(xiàn)在能夠發(fā)布100篇,這效率簡(jiǎn)直提升了100倍呀。
圖片上傳后保存在服務(wù)器端幸斥。而且也可以指定上傳接口地址存崖,這個(gè)也比較方便。因?yàn)槲覀兊臉I(yè)務(wù)是將圖片保存在單獨(dú)的云存儲(chǔ)服務(wù)器中睡毒。
3来惧、處理ueditor提供的uploadimage方法
客戶已經(jīng)使用半年,沒有問(wèn)題演顾,非常有用供搀,非常方便的功能
討論群:223813913