借用 FCKEditor 的文件上传／管理界面

在一个项目里使用到了FCKEditor.它的文件上传管理系统做得还是很不错的.我们能不能借用一下呢？

第一步，当然是得搞清楚这个页面的url了.

在FireFox 里打开FCKEditor的插入图片对话框，点击"浏览服务器",在弹出的新对话框里右击，选＂页面信息＂，于是看到了此页面的url: /FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx .

第二步，搞清楚这个对话框与主页面的交互方式（比如如何把选择的图片地址传回到原页面）.

我们在对话框里右击，＂查看源代码＂，结果却是一些<frameset><frame>代码.追踪下去，我们会发现它使用用了嵌套的Frame，结构非常复杂.我们还是用最简单的方法吧：选中文件列表中的内容，右击，＂查看选中部分源代码＂：

<tr>
<td width="16">
    <a href="#" onclick="OpenFile('/files/Image/parts/google2sogo.JPG');return false;">
      <img alt="" src="images/icons/jpg.gif" border="0" height="16" width="16">
    </a>
</td>
<td>
     <a href="#" onclick="OpenFile('/files/Image/parts/google2sogo.JPG');return false;">google2sogo.JPG</a>
</td>
<td align="right" nowrap="nowrap"> 16 KB</td>
</tr>

很明显了，点选文件时会调用OpenFile这个函数.那么它是在哪里定义的，具体内容是什么呢？

使用UltraEdit,在FCKEditor文件夹内搜索包含OpenFile的*.html,*.js，结果是：

E:\work\websites\FCKeditor\editor\filemanager\browser\default\frmresourceslist.html(77): function OpenFile( fileUrl )

好了，找到了这个OpenFile的定义了：

function OpenFile( fileUrl )
{
    window.top.opener.SetUrl( fileUrl ) ;
    window.top.close() ;
    window.top.opener.focus() ;
}

很显然，它的主要作用就是调用打开这个窗口的页面的SetUrl()函数，把选中的文件链接传递过去.这样，我们的页面上只需要定义一个SetUrl()函数就可以接收这个选中的文件地址了，下面是一个简单的示例：

aspx:

<asp:GridView runat="server" ...>
    ...
    <asp:TemplateField HeaderText="图片">
      <EditItemTemplate>
        <asp:TextBox ID="textbox1" CssClass="picture-url-save-position" runat="server" Text='<%# Bind("picture") %>'></asp:TextBox>
      <input type="button" value="选择/上传" onclick="OpenImageBrowser();" />
      </EditItemTemplate>
      <ItemTemplate>
        <img src="<%#Eval("picture") %>" alt="无图片" />
      </ItemTemplate>
    </asp:TemplateField>
</asp:GridView>

运行时效果：

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

可以在打开＂选择图片＂页面前，记录下当前是在选择哪个图片.然后在自己的SetUrl里根据以前记录的信息给相应的文本框（或其它控件）赋值.
比如：

var currentImage;

function OpenImageBrowser(imageId)
{
currentImage=imageId;
window.open(...);
}

function SetUrl(url)
{
document.getElementById(currentImage).value=url;
}

<input id="picturl1" name="picture-url" />
<input type="button" onclick="OpenImageBrowser('picture1')" value="Select/Upload" />
<input id="picturl2" name="picture-url" />
<input type="button" onclick="OpenImageBrowser('picture2')" value="Select/Upload" />

以上是在一个中文博客中看到的，现在再来看一下老外已经写好的东东：
http://sourceforge.net/tracker/index.php?func=detail&aid=1369609&group_id=75348&atid=543655

好好看一下吧，fckeditor真的很不错的，它的里面的好东东还有待开发使用。

没有相关文章

没有评论

借用 FCKEditor 的文件上传／管理界面

文章TOP15