过去，我们上传图片，一般都是一个文本框加一个“浏览”按钮，通过浏览按钮选取本地的图片，然后在提交表单后的逻辑中将图片上传至服务器。现在，我们已经把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">