扩展fckeditor的上传图片和上传文件功能！

    一直都用开fckeditor，最近客户要求编辑器里要能上传文件。编辑器里上传的图片要能添加水印功能。
于是给fckeditor做了一点小修改。以便支持此功能。
    下面是效果图：



 

 因此，要建两个页面。一个是文件上传的页面，一个是图片上传的页面。
暂且就叫fck_files.aspx。

 前台布局，别忘了引入fck_files.js咯。
这个JS是自己添加的。
<table width="97%" class="tdFont" >
        <tr>
            <td>
                <fieldset><legend>上传文件</legend>
                <table width="97%">
                    <tr>
                        <td>选择文件：<asp:FileUpload ID="flup" Width="180px" runat="server" /></td>
                        <td>
                        <asp:TextBox ID="txtType" style="display:none" runat="server"></asp:TextBox>
                        <asp:Button ID="btnUpload" runat="server" OnClientClick="javascript:return checkFile();"  Text="上传" OnClick="btnUpload_Click" /></td>
                    </tr> 
                </table>
                </fieldset>
            </td>
        </tr>
        <tr>
            <td>
               <fieldset><legend>文件列表</legend>
                <table width="97%">
                    <tr>
                        <td>
                         <asp:ListBox ID="lstbxFile" onclick="selectFiles();" style="width:100%; height:200px"  runat="server"></asp:ListBox>
                        </td> 
                    </tr>
                    <tr>
                                    <td> <asp:Button ID="btnDel"  runat="server" OnClientClick="javascript:return delFiles()"   Text="删除文件" OnClick="btnDel_Click" /></td>
                                </tr>
                </table>
                </fieldset>
            </td>
        </tr>    
        
     </table>   
     <asp:TextBox ID="txtUrl" style="display:none"  runat="server"></asp:TextBox>  
     <asp:TextBox ID="txtFileName" style="display:none"  runat="server"></asp:TextBox>  

后台程序也很简单。

 //取得所有的文件
private void GetListFiles()
    {
       
        string path = "", fname = "";
        path = this.MapPath("http://www.cnblogs.com/UploadFiles/");
      
        DirectoryInfo dir = new DirectoryInfo(path);
        if (!dir.Exists) dir.Create();
        FileInfo[] fileList = dir.GetFiles();
        lstbxFile.Items.Clear();
        foreach (FileInfo file in fileList)
        {
           lstbxFile.Items.Add(new ListItem(file.Name, fname + file.Name));
        }


    }

//上传文件事件代码。
//我这里是把文件放在UploadFiles文件夹里
 protected void btnUpload_Click(object sender, EventArgs e)
    {
        if (flup.HasFile)
        {
            string spath =  this.MapPath("http://www.cnblogs.com/UploadFiles/");            
            string sName = flup.FileName;

            //目录是否存在
            DirectoryInfo dinfo = new DirectoryInfo(spath);
            if (!dinfo.Exists) dinfo.Create();

            //存在相同文件名
            FileInfo fExt = new FileInfo(spath + "\\" + sName);
            if (fExt.Exists)
            {
                Random radName = new Random();
                sName = sName.Substring(0, sName.LastIndexOf('.')) + radName.Next(0, 99999) + "." + sName.Substring(sName.LastIndexOf('.') + 1);
                Response.Write("<script>window.alert('出现相同的文件名，文件名称已改为:\"" + sName + "\"')</script>");
            }                       
            flup.SaveAs(spath + "\\" + sName);                                
            GetListFiles();             
        }
    }

找到fckeditorcode_ie_2.js ，fckcommands.js文件，将期页面路径修改为新添加的aspx文件路径。
在dialog文件夹里，新增一个文件夹命名为fck_files,新增一js文件叫fck_files.js。

var oEditor        = window.parent.InnerDialogLoaded() ;
var FCK            = oEditor.FCK ;
var FCKLang        = oEditor.FCKLang ;
var FCKConfig    = oEditor.FCKConfig ;
var FCKDebug    = oEditor.FCKDebug ;



var bPreviewInitialized ;

window.onload = function()
{
    window.parent.SetOkButton( true ) ;
}

function Ok()
{
    if ( GetE('txtUrl').value.length == 0 )
    {        
        alert("请选择文件!");
        return false ;
    }

    var bHasImage = ( oImage != null ) ;

    oImage = FCK.EditorDocument.createElement( 'a' ) ;
    oImage.href = GetE('txtUrl').value ;
    oImage.target = '_blank';
    oImage.innerHTML = GetE('txtFileName').value ;
    oImage = FCK.InsertElementAndGetIt( oImage ) ;


    return true ;
}

基本上就差不多了！