FCKeditor升級到3.0版本，并改名為CKeditor(Content And Knowledge)，是全球最優(yōu)秀的網(wǎng)頁(yè)在線(xiàn)文字編輯器之一，因其驚人的性能與可擴展性而廣泛的被運用于各大網(wǎng)站。相信各位都有用過(guò)。
在開(kāi)發(fā)教育系統時(shí)候，很多需求需要用到富文本編輯器，我們首選也是CKeditor（國產(chǎn)的KindEditor也是一個(gè)不錯的選擇）。在探索教育系統時(shí)，教師是最需要考慮的用戶(hù)之一，而教師往往會(huì )有大量word文檔，往往會(huì )直接復制word內容粘貼到富文本編輯器提交內容。用過(guò)CKeditor會(huì )知道，如果word帶有圖片，粘貼到富文本編輯器里面是看不到圖片的。
本文就是研究CKeditor粘貼圖片在IE下自動(dòng)上傳的功能實(shí)現。
一、粘貼圖片內容為什么不到圖片？
打開(kāi)CKeditor的官網(wǎng)演示頁(yè)面（http://ckeditor.com/demo）。打開(kāi)一個(gè)word文檔，復制文檔中有圖片和文字部分?？聪聢D：
粘貼到CKeditor編輯器里面，卻是顯示不出圖片，看下圖：
查看CKeditor里面的源碼可以看到，圖片的<img>里面的資源鏈接都是本地機器上的圖片，沒(méi)有權限讀取本地的圖片，提交后，此圖片鏈接也是向本地的，不是互聯(lián)網(wǎng)上的圖片，這就是永遠也看不到圖片了：
二、解決方案
1.借助IE的ActiveX插件把本地圖片轉換長(cháng)BASE64碼
2.編寫(xiě)CKeditor插件，取用ajax技術(shù)自動(dòng)提交BASE64碼到后臺，后臺獲取BASE64碼后轉換成圖片存儲在服務(wù)器上，并返回數據到插件并把網(wǎng)絡(luò )圖片的URL替換原來(lái)的指向本地圖片的地址。
三、實(shí)現的技術(shù)細節
ActiveX作用
ActiveX的作用，就是提供一個(gè)方法，將圖片轉換成Base64編碼，前端JavaS
編寫(xiě)CKeditor插件
此插件會(huì )檢測到粘貼動(dòng)作，并判斷粘貼的內容是否存放本地圖片，如果存在就進(jìn)行處理。JavaS
后臺如何處理BASE64
需要編寫(xiě)后臺程序來(lái)獲取BASE64碼并轉換成圖片，保存到服務(wù)器，獲得圖片的網(wǎng)絡(luò )絕對地址，并替換原編輯器內容的圖片src。
Java用sun.misc.BASE64Decoder().decodeBuffer(String str)來(lái)獎Base64圖片編碼轉換成字節。
PHP用base64_ decoder()。
四、已完成的功能和不足之處
在IE下借助ActiveX的功能，本人已經(jīng)完成了粘貼圖片到CKeditor,圖片會(huì )自動(dòng)上傳功能。
完成ActiveX的程序；
完成CKeditor插件的編寫(xiě)（插件式，不影響升級CKeditor）；
完成JAVA的J2EE后臺處理BASE64碼的轉換，因為老師會(huì )多次復制和粘貼同一樣內容，所以圖片文件的存儲會(huì )一定的壓力，已經(jīng)完成對文件進(jìn)行MD5唯一性驗證，同一樣圖片服務(wù)器上只存在一個(gè)實(shí)體圖片文件。
此實(shí)現思路可以在其他的富文本編輯器下實(shí)現，只是編寫(xiě)不同的編輯器插件。
不足之處
必須要在IE下起作用，且必須安裝ActiveX插件并允許執行。
其他瀏覽器暫時(shí)不能使用此方案。
似乎只能通過(guò)復雜word里面的內容粘貼才會(huì )響應上傳。用QQ等直接截圖后粘貼不了…..
聯(lián)系客服
