当前位置 : 首页 » 博文聚焦 » 正文

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

分类 : 博文聚焦 | 发布时间 : 2007-07-10 14:49:00 | 浏览 : 5

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

image

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

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

image

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

 我们在对话框里右击,"查看源代码",结果却是一些<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>
    &nbsp;<a href="#" onclick="OpenFile('/files/Image/parts/google2sogo.JPG');return false;">google2sogo.JPG</a>
  </td>
  <td align="right" nowrap="nowrap">&nbsp;16 KB</td>
</tr>

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

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

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

image

好了,找到了这个OpenFile的定义了:

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

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

aspx:

<script type="text/javascript">
    function SetUrl(url)
    {
       var labels=document.getElementsByTagName('input');
       for(var i=0; i<labels.length; i++)
       {
            if(labels[i].className=="picture-url-save-position")
            {
                labels[i].value=url;
                break;
            }
       }
    }
    function OpenImageBrowser()
    {
        window.open('/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx','Browse/Upload Images','toolbar=no,status=no,resizable=yes,dependent=yes,scrollbars=yes,width=600,height=400')
    }
</script>

<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>

运行时效果:

image

相关阅读: