单独使用fckeditor的文件上传功能

本文介绍如何将FCKeditor的文件上传功能独立出来使用,适用于2.6.4版本。通过修改web.xml配置和HTML文件,实现了自定义文件路径和ID参数的设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 fckeditor的文件上传功能做的确实不错,但只能在编辑器中使用,有点不爽,今天做了一些修改,完成了对它的单独使用。

我用的是fckeditor2.6.4版本

1.在web.xml中增加如下内容
 <servlet>
  <servlet-name>FckConnector</servlet-name>
  <servlet-class>
   net.fckeditor.connector.ConnectorServlet
  </servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
  <servlet-name>FckConnector</servlet-name>
  <url-pattern>
   /fckeditor/editor/filemanager/browser/default/connectors/jsp/connector
  </url-pattern>
 </servlet-mapping>

 

注意:不要把原来的去掉,如去掉编辑器中的文件上传将不能使用

 

2.修改fckeditor/editor/filemanager/broswer/default/frmresourceslist.html文件

添加一个函数用于获取参数

function GetUrlParam( paramName )
{
 var oRegex = new RegExp( '[/?&]' + paramName + '=([^&]+)', 'i' ) ;
 var oMatch = oRegex.exec( window.top.location.search ) ;

 if ( oMatch && oMatch.length > 1 )
  return decodeURIComponent( oMatch[1] ) ;
 else
  return '' ;
}

修改一个函数

function OpenFile( fileUrl )
{
/* 

//注释掉的是原来的

window.top.opener.SetUrl( encodeURI( fileUrl ).replace( '#', '%23' ) ) ;
 window.top.close() ;
 window.top.opener.focus() ;*/
 
 var parent = window.top.opener;
 
 if(parent!=null){
  parentDocument = parent.document;
  try{
   //获取id,用于决定把值放在那个文本框中
   if(parentDocument.getElementById(GetUrlParam("id"))!=null){
    parentDocument.getElementById(GetUrlParam("id")).value=fileUrl;
   }
   
   var basePath=parentDocument.getElementById("basePath");
   var img=parentDocument.getElementById("imgurl");   
   if(img != null && basePath !=null)
   { 
    img.src=basePath.value+fileUrl;
      
   }
  }catch(e){
   window.top.close();
  }
  window.top.close();
 }

 if(window.top.opener!=null){
  window.top.opener.SetUrl(  fileUrl  ) ;
  window.top.close() ;
  window.top.opener.focus() ;
 }else{
  window.returnValue = fileUrl ;
  window.top.close() ; 
 } 
}

3.调用

window.open('/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector&id=selectLOGO','','width=600,height=400,left=200,top=200');

参数id是你想要把文件url放在那个文件框的id

有问题?直接google! <script src="http://pagead2.googlesyndication.com/pagead/show_sdo.js" type="text/javascript"></script>

最近做了一个文章管理的系统,用到在线编辑器,修改了一下现在能实现音频,视频,图片,附件,Flash等文件的上传。费了好大的功夫。。 FCKeditor应用在ASP.NET上,需要两组文件,一组是FCKeditor本身,另一个是用于ASP.NET的FCKeditor控件(分为1.1和2.0两个版本,这里使用2.0版本)。 1. 将FCKeditor加入到项目中 解压FCKeditor编辑器,得到文件夹fckeditor,复制此文件夹到Web应用的项目下(也可以是子孙目录下)。 解压FCKeditor控件,在其子目录bin/Release/2.0下有一个程序集。在Web应用的项目中引用该程序集。 2. 在页面中使用FCKeditor 有两种方式。 (1)手工编码 在页面中加入ASP.NET指令: 然后在需要的地方加入FCKeditor控件: (2)集成到Visual Studio工具箱 打开一ASP.NET页面,展开Toolbox,打开右键菜单,选择“Choose Items ...”,在出现的“Choose Toolbox Items”会话框的“.NET Framework Components”选项卡中选择“Browse”,找到并选中FCKeditor程序集,打开后回到“Choose Toolbox Items”窗口,点击“OK”,完成控件导入。 这时,在Toolbox的General分类下出现了一个名为FCKeditor的控件,可以像使用Visual Studio内置控件一样使用它。 3. 配置FCKeditor编辑器路径 在页面中,使用的是FCKeditor控件,该控件需要知道FCKeditor编辑器文件组的路径。有两种配置方法。 (1)配置web.config 在appSettings配置节中加入 使用这种配置方法后,对于项目中任何一个页面中用到的FCKeditor控件,都不用再配置其BasePath属性。 (2)直接对用到的FCKeditor控件进行配置 在页面代码中设置FCKeditor的属性BasePath为FCKeditor编辑器文件组的路径,或者在Page_Init事件处理器中设置其BasePath的值。 4. 配置FCKeditor编辑器文件上传路径 在web.config的appSettings配置节中加入 或者 这样,就完成了FCKeditor向ASP.NET页面的集成工作。 二、配置FCKeditor 按照FCKeditor的默认配置,可以完成一些常用的HTML可视化编辑工作,但在实际应用中,还需要对其做进一步的配置。FCKeditor控件的可配置属性不多,且配置后只能作用于一个单一实例。实际上,需要对FCKeditor编辑器文件组中的通用配置文件/fckconfig.js和ASP.NET专用文件上传管理代码文件/editor/filemanager/connectors/aspx/config.ascx进行配置。 1. 配置控件语言 FCKeditor是自动探测浏览器所使用的语言编码的,其默认语言是英文。修改配置行"FCKConfig.DefaultLanguage = 'en';"为'zh-cn',采用中文为默认语言。 2. 配置控件应用技术 FCKeditor默认是用于php技术的。修改配置行"var _FileBrowserLanguage = 'php';"和"var _
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值