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

 

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

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



后台程序也很简单。

扩展fckeditor的上传图片和上传文件功能! //取得所有的文件
扩展fckeditor的上传图片和上传文件功能!
private void GetListFiles()
    }

扩展fckeditor的上传图片和上传文件功能!//上传文件事件代码。
扩展fckeditor的上传图片和上传文件功能!
//我这里是把文件放在UploadFiles文件夹里
扩展fckeditor的上传图片和上传文件功能!
 protected void btnUpload_Click(object sender, EventArgs e)

找到fckeditorcode_ie_2.jsfckcommands.js文件,将期页面路径修改为新添加的aspx文件路径。
dialog文件夹里,新增一个文件夹命名为fck_files,新增一js文件叫fck_files.js
扩展fckeditor的上传图片和上传文件功能!
扩展fckeditor的上传图片和上传文件功能!
var oEditor        = window.parent.InnerDialogLoaded() ;
扩展fckeditor的上传图片和上传文件功能!
var FCK            = oEditor.FCK ;
扩展fckeditor的上传图片和上传文件功能!
var FCKLang        = oEditor.FCKLang ;
扩展fckeditor的上传图片和上传文件功能!
var FCKConfig    = oEditor.FCKConfig ;
扩展fckeditor的上传图片和上传文件功能!
var FCKDebug    = oEditor.FCKDebug ;
扩展fckeditor的上传图片和上传文件功能!
扩展fckeditor的上传图片和上传文件功能!
扩展fckeditor的上传图片和上传文件功能!
扩展fckeditor的上传图片和上传文件功能!
var bPreviewInitialized ;
扩展fckeditor的上传图片和上传文件功能!
扩展fckeditor的上传图片和上传文件功能!window.onload 
= function()

基本上就差不多了!

相关文章: