FCKeditor更新到3.0版本，并改名為CKeditor(Content And Knowledge)，是全球最優秀的網頁線上文字編輯器之一，因其驚人的性能與可擴充性而廣泛的被運用于各大網站。相信各位都有用過。
在開發教育系統時候，很多需求需要用到富文本編輯器，我們首選也是CKeditor（國産的KindEditor也是一個不錯的選擇）。在探索教育系統時，教師是最需要考慮的使用者之一，而教師往往會有大量word文檔，往往會直接複制word内容粘貼到富文本編輯器送出内容。用過CKeditor會知道，如果word帶有圖檔，粘貼到富文本編輯器裡面是看不到圖檔的。
本文就是研究CKeditor粘貼圖檔在IE下自動上傳的功能實作。
一、粘貼圖檔内容為什麼不到圖檔？
打開CKeditor的官網示範頁面（http://ckeditor.com/demo）。打開一個word文檔，複制文檔中有圖檔和文字部分。看下圖：
粘貼到CKeditor編輯器裡面，卻是顯示不出圖檔，看下圖：
檢視CKeditor裡面的源碼可以看到，圖檔的<img>裡面的資源連結都是本地機器上的圖檔，沒有權限讀取本地的圖檔，送出後，此圖檔連結也是向本地的，不是網際網路上的圖檔，這就是永遠也看不到圖檔了：
二、解決方案
1.借助IE的ActiveX插件把本地圖檔轉換長BASE64碼
2.編寫CKeditor插件，取用ajax技術自動送出BASE64碼到背景，背景擷取BASE64碼後轉換成圖檔存儲在伺服器上，并傳回資料到插件并把網絡圖檔的URL替換原來的指向本地圖檔的位址。
三、實作的技術細節
ActiveX作用
ActiveX的作用，就是提供一個方法，将圖檔轉換成Base64編碼，前端JavaScript會調用此方法；ActiveX中核心方法是：
編寫CKeditor插件
此插件會檢測到粘貼動作，并判斷粘貼的内容是否存放本地圖檔，如果存在就進行處理。JavaScript調用ActiveX插件的轉換方法，把本地圖檔轉換成BASE64碼，并通過ajax送出到背景；背景傳回真實的網絡圖檔位址，插件會替換掉編輯器裡面原本地圖檔的連接配接。看代碼片斷：
/*
* CKEDITOR plugin pasteuploadpic 1.0 released
* SITE: http://jacken.com.cn
* AUTHOR: Jacken(陳文光)
* MAIL: [email protected]
*/
// 處理粘貼内容
var pasteService = function(evt) {
// 所見即所得模式,其他模式就退出
if (this.mode != 'wysiwyg')
return;
var data = evt.data['html'];
// 處理html内容
if (!data)
return;
// 檢測本地檔案位址的正規表達式
var localImgReg = //ig;
var imgArray = data.match(localImgReg);
// 是否有本地圖檔URL
if (imgArray) {
// 上傳并處理編輯器内容
replaceEditor(uoloadPic(imgArray));
}
};
if (pasteuploadpic_url) {
// 監聽事件
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碼并轉換成圖檔，儲存到伺服器，獲得圖檔的網絡絕對位址，并替換原編輯器内容的圖檔src。
Java用sun.misc.BASE64Decoder().decodeBuffer(String str)來獎Base64圖檔編碼轉換成位元組。
PHP用base64_ decoder()。
四、已完成的功能和不足之處
在IE下借助ActiveX的功能，本人已經完成了粘貼圖檔到CKeditor,圖檔會自動上傳功能。
完成ActiveX的程式；
完成CKeditor插件的編寫（插件式，不影響更新CKeditor）；
完成JAVA的J2EE背景處理BASE64碼的轉換，因為老師會多次複制和粘貼同一樣内容，是以圖檔檔案的存儲會一定的壓力，已經完成對檔案進行MD5唯一性驗證，同一樣圖檔伺服器上隻存在一個實體圖檔檔案。
此實作思路可以在其他的富文本編輯器下實作，隻是編寫不同的編輯器插件。
不足之處
必須要在IE下起作用，且必須安裝ActiveX插件并允許執行。
其他浏覽器暫時不能使用此方案。
似乎隻能通過複雜word裡面的内容粘貼才會響應上傳。用QQ等直接截圖後粘貼不了…..
轉自：http://www.jacken.com.cn/mylife/ckeditor-paste-pictures-in-ie-autoupload-research.html