將CKfinder 整合進(jìn) CKEditor3.0的方法

更新時間：2010年01月09日 23:57:35 作者：

CKFinder是一款基于AJAX的文件瀏覽器，這是ASP.NET專用版，它可以在線瀏覽文件、管理文件、上傳文件，以樹形Tree的方式展開目錄，自動檢測圖片并生成縮略圖，它是由Fckeditor公司出品，同時也可配合FckEditor來使用，可達(dá)到意想不到的效果。

由于本次CKEditor全新改版，沒有提供文件上傳功能，所以選擇整合CKFinder是個不錯的選擇
需要修改一下CKEditor插件文件夾下的JS源碼，以image插件為例（Flash及Files同理）：
Code

復(fù)制代碼代碼如下:

 
//將下邊的代碼做一些修改 
//{type:'button',id:'browse',align:'center',label:m.lang.common.browseServer,hidden:false,filebrowser:'info:txtUrl'}]}]}, 
//2009-07-13 將瀏覽服務(wù)器按鈕置為顯示狀態(tài) （hidden: false）,增加onClick函數(shù)，用于打開ckfinder頁面 
{ type: 'button', id: 'browse', align: 'center', label: m.lang.common.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() { var finder = new CKFinder(); finder.BasePath = '../ckfinder20090716/'; finder.SelectFunction = SetFileField; finder.Popup(); } }]}]}, 


在方法體外增加下邊的函數(shù) 
//2009-07-13 楊鑫增加 用于取回 ckfinder 返回的圖片地址并對路徑文本框和預(yù)覽圖片進(jìn)行賦值 
function SetFileField(fileUrl) 
{ 
//獲取主Div下的所有文本框控件 
var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input"); 
for(var i=0; i<inputStr.length; i++) 
{ 
if(inputStr[i].type=="text") 
{ 
//第一個輸入框控件是圖像路徑，得到ID，設(shè)置新的圖片路徑 
CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl); 
break ; 
} 
} 
CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl)); 
} 