【轉(zhuǎn)】CKeditor粘貼圖片在IE下自動上傳的研究

cathy001 2015-07-17

展開全文

FCKeditor升級到3.0版本，并改名為CKeditor(Content And Knowledge)，是全球最優(yōu)秀的網(wǎng)頁在線文字編輯器之一，因其驚人的性能與可擴展性而廣泛的被運用于各大網(wǎng)站。相信各位都有用過。

在開發(fā)教育系統(tǒng)時候，很多需求需要用到富文本編輯器，我們首選也是CKeditor（國產(chǎn)的KindEditor也是一個不錯的選擇）。在探索教育系統(tǒng)時，教師是最需要考慮的用戶之一，而教師往往會有大量word文檔，往往會直接復制word內(nèi)容粘貼到富文本編輯器提交內(nèi)容。用過CKeditor會知道，如果word帶有圖片，粘貼到富文本編輯器里面是看不到圖片的。

本文就是研究CKeditor粘貼圖片在IE下自動上傳的功能實現(xiàn)。

一、粘貼圖片內(nèi)容為什么不到圖片？

打開CKeditor的官網(wǎng)演示頁面（http:///demo）。打開一個word文檔，復制文檔中有圖片和文字部分?？聪聢D：

粘貼到CKeditor編輯器里面，卻是顯示不出圖片，看下圖：

查看CKeditor里面的源碼可以看到，圖片的<img>里面的資源鏈接都是本地機器上的圖片，沒有權(quán)限讀取本地的圖片，提交后，此圖片鏈接也是向本地的，不是互聯(lián)網(wǎng)上的圖片，這就是永遠也看不到圖片了：

二、解決方案

1.借助IE的ActiveX插件把本地圖片轉(zhuǎn)換長BASE64碼

2.編寫CKeditor插件，取用ajax技術(shù)自動提交BASE64碼到后臺，后臺獲取BASE64碼后轉(zhuǎn)換成圖片存儲在服務(wù)器上，并返回數(shù)據(jù)到插件并把網(wǎng)絡(luò)圖片的URL替換原來的指向本地圖片的地址。

三、實現(xiàn)的技術(shù)細節(jié)

ActiveX作用

ActiveX的作用，就是提供一個方法，將圖片轉(zhuǎn)換成Base64編碼，前端JavaScript會調(diào)用此方法；ActiveX中核心方法是：

public string ImageToBase64(string ImagePath);

編寫CKeditor插件

此插件會檢測到粘貼動作，并判斷粘貼的內(nèi)容是否存放本地圖片，如果存在就進行處理。JavaScript調(diào)用ActiveX插件的轉(zhuǎn)換方法，把本地圖片轉(zhuǎn)換成BASE64碼，并通過ajax提交到后臺；后臺返回真實的網(wǎng)絡(luò)圖片地址，插件會替換掉編輯器里面原本地圖片的連接?？创a片斷：

/* * CKEDITOR plugin pasteuploadpic 1.0 released * SITE: http:// * AUTHOR: Jacken(陳文光) * MAIL: chenjacken@gmail.com */// 處理粘貼內(nèi)容var pasteService =function(evt){// 所見即所得模式,其他模式就退出if(this.mode!='wysiwyg')return;var data = evt.data['html'];// 處理html內(nèi)容if(!data)return;// 檢測本地文件地址的正則表達式var localImgReg =//ig; var imgArray = data.match(localImgReg);// 是否有本地圖片URLif(imgArray){// 上傳并處理編輯器內(nèi)容 replaceEditor(uoloadPic(imgArray)); } };if(pasteuploadpic_url){// 監(jiān)聽事件 editor.on('paste', pasteService,null,null,1000);}/** * 配置處理圖片上傳的后臺地址,如果不配置,此插件不會啟用. * * @name CKEDITOR.config.pasteuploadpic_url * @type String * @default null * @since 1.0 * @example config.pasteuploadpic_url='/ckeditorAction_upload.action'; *//** * 配置ActiveXObject名稱 * * @name CKEDITOR.config.pasteuploadpic_axo * @type String * @default 'Jacken.Word' * @since 1.0 * @example config.pasteuploadpic_axo='/Jacken.Word'; */

后臺如何處理BASE64

需要編寫后臺程序來獲取BASE64碼并轉(zhuǎn)換成圖片，保存到服務(wù)器，獲得圖片的網(wǎng)絡(luò)絕對地址，并替換原編輯器內(nèi)容的圖片src。

Java用sun.misc.BASE64Decoder().decodeBuffer(String str)來獎Base64圖片編碼轉(zhuǎn)換成字節(jié)。

PHP用base64_ decoder()。

四、已完成的功能和不足之處

在IE下借助ActiveX的功能，本人已經(jīng)完成了粘貼圖片到CKeditor,圖片會自動上傳功能。

完成ActiveX的程序；

完成CKeditor插件的編寫（插件式，不影響升級CKeditor）；

完成JAVA的J2EE后臺處理BASE64碼的轉(zhuǎn)換，因為老師會多次復制和粘貼同一樣內(nèi)容，所以圖片文件的存儲會一定的壓力，已經(jīng)完成對文件進行MD5唯一性驗證，同一樣圖片服務(wù)器上只存在一個實體圖片文件。

此實現(xiàn)思路可以在其他的富文本編輯器下實現(xiàn)，只是編寫不同的編輯器插件。

不足之處

必須要在IE下起作用，且必須安裝ActiveX插件并允許執(zhí)行。