在JSP中配置FCKeditor 2.6.4

1.FCKeditor 介绍
FCKeditor 这个开源的HTML 文本编辑器可以让web 程序拥有如MS Word 这样强大的编辑功能,.FCKeditor 支持当前流行的浏览器。

2.准备工作:

环境:winddows XP、tomcat6.0、JDK1.6
下载:
1):FCKeditor_2.6.4.zip
地址:http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.6.4.zip

2):fckeditor-java-2.4.1-bin.zip (JAVA支持包)地址http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-2.4.1-bin.zip

3):slf4j-1.5.2.zip 地址 :http://www.slf4j.org/dist/slf4j-1.5.2.zip

3.安装:

下面以jsp为例:

分别解压之后,我们可以得到一个fckeditor和fckeditor-java-2.4.1两个文件夹。fckeditor文件夹下是需要调用的页面和js文件等等,有各种版本,无所谓啦,我们之需要jsp就够了。将文件加全部复制到工程目录下等待调用即可。
注意:有点麻烦的是导包的问题。我们一共需要5个包:commons-fileupload-1.2.1.jar,commons-io-1.3.2.jar,fckeditor-java-core-2.4.1.jar,slf4j-api-1.5.6.jar,slf4j-simple-1.5.6.jar或slf4j-jdk14-1.5.6.jar。
上面前四个包都可以在fckeditor-java-2.4.1文件夹下面找到,但是第五个却要另外去找,这点我非常不理解,为什么不放在一起。
如果没有的话编译时就会出现如下错误信息:
严重: Servlet /fckeditorDemo threw load() exception
java.lang.NoClassDefFoundError: org/slf4j/impl/StaticLoggerBinder



当然版本或许不同,以上的版本是截止2009-02-4的最新版本。如果想要最新版本,可以在slf4j的官网http://www.slf4j.org/download.html下到。但是要注意,截止到2009-2-4,slf4j官方最新版本是1.5.6,但是fckeditor提供的slf4j-api却是1.5.2版本,如果两个版本不一样的话,你将会在控制台看到如下的消息:

严重: Servlet /Java threw load() exception
java.lang.IllegalAccessError: tried to access field org.slf4j.impl.StaticLoggerBinder.SINGLETON from class

org.slf4j.LoggerFactory



所以千万要注意版本一致问题。如果你实在觉得下载很麻烦,那就到这里下载吧:http://www.slf4j.org/download.html


4.配置

1)在工程目录src/下新建一个文件fckeditor.properties,添加内容:

connector.userFilesPath = UploadFile
connector.userActionImpl
= net.fckeditor.requestcycle.impl.UserActionImpl

其中第一行为重新定义上传的文件夹,默认文件夹为userfile,保存即可。
2)修改web.xml,用来提供上传功能支持

< servlet >                                           
      
< servlet-name > Connector </ servlet-name >        
        
< servlet-class >                             
          net.fckeditor.connector.ConnectorServlet 
      
</ servlet-class >                              
      
< load-on-startup > 1 </ load-on-startup >          
</ servlet >                                          
< servlet-mapping >                                   
      
< servlet-name > Connector </ servlet-name >        
      
< url-pattern >                                 
        /fckeditor/editor/filemanager/connectors/* 
      
</ url-pattern >                                
</ servlet-mapping >                             

5.应用,建立一JSP文件如下

<% @ page language = " java "  import = " java.util.* "  pageEncoding = " UTF-8 " %>
<%
String  path  =  request.getContextPath();
String  basePath  =  request.getScheme() + " :// " + request.getServerName() + " : " + request.getServerPort() + path + " / " ;

String  content = request.getParameter( " edt1 " );
if  (content ! =   null ) {
  content 
=  content.replaceAll( " /r/n " "" );
  content 
=  content.replaceAll( " /r " "" );
  content 
=  content.replaceAll( " /n " "" );
  content 
=  content.replaceAll( " /"",  " ' ");
} else {
  content 
=   "" ;
}

// 下面是处理中文内容的编码转换
content 
=   new   String (content.getBytes( " iso8859-1 " ), " utf-8 " );
%>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
  
< head >
    
< base  href ="<%=basePath%>" >
    
    
< title > FCKEditor 测试 </ title >

  
</ head >
  
< script  type ="text/javascript"  src ="fckeditor/fckeditor.js" ></ script >
  
< body >
    This is my JSP page. 
< br >
    
< form  method ="post"  name ="frm1" >
    
< script  type ="text/javascript" >
        
var  oFCKeditor  =   new  FCKeditor( " edt1 " );
        oFCKeditor.BasePath 
=   " fckeditor/ " ;
        oFCKeditor.Height
= ' 400 ';
        oFCKeditor.Value
= " <%=content%> " ;
        oFCKeditor.Create();
    
</ script >
    
< input  type ="submit"  value ="提交" >
    
</ form >
    
< hr >
    
<% = content %>
  
</ body >
</ html >

启动服务器,用浏览器访问即可看到结果

今天折腾了一个下午,终于算是看到点效果了,便记录在这里,上面的内容在网上转了一部分,因为找不到原文出处,也就没有注明了

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
彻底解决fckeditor(jsp版)上传文图片乱码问题,我这里用的编码是utf-8的,这里用的fckeditor2.6的,fckeditor.java包是2.3的,经过我修改ConnectorServlet.java和SimpleUploaderServlet.java两个文件,重新生成fckeditor-java-2.3.jar包, 要解决所有的乱码问题,有3部要修改, 1.修改Web容器的字符编码,如果Web容器用的是Tomcat,则修改conf/server.xml文件,在两个Connector添加“URIEncoding="utf-8"”,我这里用的是utf-8编码,所以修改成utf-8,若项目是gb2312编码,则设置为“URIEncoding="gb2312"”。 2.在“浏览服务器”页面上传文件时,打开项目WebRoot的文件/editor/filemanager/browser/default/frmupload.html,在head加一个meta: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />,看看该文件是不是utf-8格式的,若不是,则转换成utf-8,若你用的不是utf-8则转成你用的那种编码,上面charset也设置成你用的编码 3.修改ConnectorServlet.java和SimpleUploaderServlet.java两个文件,我在这两个文件都是加了一个静态变量encoding,private static String encoding;保存项目的编码, 若在web.xml文件没有给这个变量传值的话,默认是gb2312,如下代码if(encoding.isEmpty()){encoding="gb2312";},在ConnectorServlet.java的doGet与doPost的开头部分加入request.setCharacterEncoding(encoding);将请求的字符集编码设置成项目的编码,在ConnectorServlet.java和SimpleUploaderServlet.java两个文件的DiskFileUpload upload = new DiskFileUpload();后面加入upload.setHeaderEncoding(encoding);告诉FileUpload组件处理时的编码为项目编码,在FileItem,用getString(encoding),这项设置可以解决获取的表单字段为乱码的问题,所以在每个FileItem实例后面都执行一次getString(encoding),就告诉FileItem在取值时用的编码是encoding所设置的编码。如在ConnectorServlet.java和SimpleUploaderServlet.java两个文件的 FileItem item后面加上一句item.getString(encoding);在FileItem uplFile后面加上一句uplFile.getString(encoding); 接下来就是设置web.xml了,在web.xml给上面讲到的encoding传值,如下 <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> 一切都OK了,真正的解决了上传文名图片乱码问题。 在上面的第3步,要用到Ant产生jar,这时要注意, 把Tomcat安装目录下/server/lib里的catalina-ant.jar复制到项目的/WEB-INF/lib下。打开build.xml,修改property name="catalina.home"成Tomcat的安装目录。修改taskdef name="deploy"、taskdef name="list"、taskdef name="reload"、taskdef name="undeploy"如下: <taskdef name="deploy" classname="org.apache.catalina.ant.DeployTask"> <classpath refid="compile.classpath"></classpath> </taskdef> <taskdef name="list" classname="org.apache.catalina.ant.ListTask"> <classpath refid="compile.classpath"></classpath> </taskdef> <taskdef name="reload" classname="org.apache.catalina.ant.ReloadTask"> <classpath refid="compile.classpath"></classpath> </taskdef> <taskdef name="undeploy" classname="org.apache.catalina.ant.UndeployTask"> <classpath refid="compile.classpath"></classpath> </taskdef> 然后在Eclipse的Outline窗口运行Ant的dist,就会生成的新的FCKeditor-2.3.jar。 绝对是真实的,共享出来与大家分享,少一个上传其它文件的,如RAR的,有添加过这个功能的朋友也拿出来共享下吧
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值