過去，我們上傳圖片，一般都是一個文本框加一個“瀏覽”按鈕，通過瀏覽按鈕選取本地的圖片，然后在提交表單后的邏輯中將圖片上傳至服務器。現在，我們已經把FCKEditor應用在了我們的系統里，而FCKEditor中帶了有了圖片上傳和瀏覽功能。所以我就想讓這個“瀏覽”按鈕不是從本地選取圖片，而是從FCKEditor傳到服務器上的圖片中來選舉。也就是把FCKEditor的“瀏覽”按鈕，抽取出來。
在閱讀FCKEditor的源碼之后，做如下處理。
1. 新增兩個javascript函數。
var?currentImageTextID;
//FCKEditor的文件瀏覽窗關閉后，會調用此函數，并把所選圖片的url傳入。
function?SetUrl(url){
??document.getElementById(currentImageTextID).value=url;
}
//imageTextID:?圖片文本框的ID值
//uploadPath:?服務器的圖片目錄
//type:?瀏覽類型，值可為Image/Flash/File/Media，如果為空字串，則表示瀏覽所有類型的文件
function?OpenImageBrowser(imageTextID,?uploadPath,?type?)?{
??currentImageTextID?=?imageTextID;
??window.open('/javascripts/fckeditor/editor/filemanager/browser/default/browser.html?uploaded='+uploadPath +'&Type='+type+'&Connector=/fckeditor/command','Browse/Upload?Images','toolbar=no,status=no, resizable=yes,dependent=yes, scrollbars=yes,width=600,height=400')
}
2.在View中這樣使用
標志圖片:
<input?id="topic_image"?name="topic[image]"?size="30"?type="text">
<input?value="瀏覽服務器"?onclick="OpenImageBrowser('topic_image',?'/uploads/s<%= params[:user_id]%>',?'Image')"?type="button">