如何配置JSP中的FCKeditor编辑器(IDE:MyEclipse 6.5)

开发环境: 
IDE:MyEclipse6.5
框架:Struts2+spring+hibernate

步骤:
1. 在fckeditor的官方网站http://ckeditor.com/download下载FCKeditor_2.5.1.zip和FCKeditor-2.3.zip(for java),版本不同内容不同

2. 在MyEclipse中新建web项目,我的叫做wsjx

3. 解压缩两个文件,把FCKeditor_2.5.1.zip解压出来的fckeditor文件夹放在WebRoot目录下,把FCKeditor- 2.3.zip(for java)解压出来的web下的WEB-INF下的lib目录中的commons-fileupload.jar和FCKeditor-2.3.jar两个jar包拷到项目的lib目录下,把FCKeditor-2.3.zip(for java)解压出来的src目录下的FCKeditor.tld拷贝到项目的WEB-INF下

4. 修改fckeditor文件夹下的fckeditor.js,找到FCKeditor.BasePath 并附值FCKeditor.BasePath = '/wsjx/fckeditor/'

5. 修改fckeditor文件夹下的fckconfig.js,找到并作如下修改
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/jsp/connector' ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector' ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector' ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
    不好意思,这部分的修改没有搞明白什么原因

6. 修改web.xml,加入:
web.xml

[xhtml]  view plain copy print ?
  1. <servlet>  
  2.     <servlet-name>Connector</servlet-name>  
  3.     <servlet-class>  
  4.         com.fredck.FCKeditor.connector.ConnectorServlet  
  5.     </servlet-class>  
  6.     <init-param>  
  7.         <param-name>baseDir</param-name>  
  8.         <param-value>/UserFiles/</param-value>  
  9.     </init-param>  
  10.     <init-param>  
  11.         <param-name>debug</param-name>  
  12.         <param-value>true</param-value>  
  13.     </init-param>  
  14.     <load-on-startup>1</load-on-startup>  
  15. </servlet>  
  16.   
  17. <servlet>  
  18.     <servlet-name>SimpleUploader</servlet-name>  
  19.     <servlet-class>  
  20.         com.fredck.FCKeditor.uploader.SimpleUploaderServlet  
  21.     </servlet-class>  
  22.     <init-param>  
  23.         <param-name>baseDir</param-name>  
  24.         <param-value>/UserFiles/</param-value>  
  25.     </init-param>  
  26.     <init-param>  
  27.         <param-name>debug</param-name>  
  28.         <param-value>true</param-value>  
  29.     </init-param>  
  30.     <init-param>  
  31.         <param-name>enabled</param-name>  
  32.         <param-value>true</param-value>  
  33.     </init-param>  
  34.     <init-param>  
  35.         <param-name>AllowedExtensionsFile</param-name>  
  36.         <param-value></param-value>  
  37.     </init-param>  
  38.     <init-param>  
  39.         <param-name>DeniedExtensionsFile</param-name>  
  40.         <param-value>  
  41.             php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi  
  42.         </param-value>  
  43.     </init-param>  
  44.     <init-param>  
  45.         <param-name>AllowedExtensionsImage</param-name>  
  46.         <param-value>jpg|gif|jpeg|png|bmp</param-value>  
  47.     </init-param>  
  48.     <init-param>  
  49.         <param-name>DeniedExtensionsImage</param-name>  
  50.         <param-value></param-value>  
  51.     </init-param>  
  52.     <init-param>  
  53.         <param-name>AllowedExtensionsFlash</param-name>  
  54.         <param-value>swf|fla</param-value>  
  55.     </init-param>  
  56.     <init-param>  
  57.         <param-name>DeniedExtensionsFlash</param-name>  
  58.         <param-value></param-value>  
  59.     </init-param>  
  60.     <load-on-startup>1</load-on-startup>  
  61. </servlet>  
  62.   
  63. <servlet-mapping>  
  64.     <servlet-name>Connector</servlet-name>  
  65.     <url-pattern>  
  66.         /fckeditor/editor/filemanager/browser/default/connectors/jsp/connector  
  67.     </url-pattern>  
  68. </servlet-mapping>  
  69.   
  70. <servlet-mapping>  
  71.     <servlet-name>SimpleUploader</servlet-name>  
  72.     <url-pattern>  
  73.         /fckeditor/editor/filemanager/upload/simpleuploader  
  74.     </url-pattern>  
  75. </servlet-mapping>  

7. 现在开始编写页面:有两个页面,一个是提交页面(addContent.jsp),一个是显示页面(showContent.jsp)
addContent.jsp:

[xhtml]  view plain copy print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2.   
  3. <%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck"%>  
  4. <html>  
  5.     <head>  
  6.         <title>FCKeditor</title>  
  7.     </head>  
  8.   
  9.     <body>  
  10.         <form action="showContent.jsp" method="post">  
  11.             <table align="center">  
  12.   
  13.                 <tr>  
  14.                     <td></td>  
  15.                 </tr>  
  16.                 <tr>  
  17.                     <td>  
  18.                         <fck:editor id="content" basePath="/wsjx/fckeditor/" width="1000"  
  19.                             height="500" skinPath="/wsjx/fckeditor/editor/skins/office2003/"  
  20.                             toolbarSet="Default">  
  21.                         </fck:editor>  
  22.                     </td>  
  23.                 </tr>  
  24.                 <tr>  
  25.                     <td>  
  26.                         <input type="submit" value="Submit">  
  27.                     </td>  
  28.                 </tr>  
  29.             </table>  
  30.   
  31.         </form>  
  32.   
  33.     </body>  
  34. </html>  

showConten.jsp:这个相对简单

[xhtml]  view plain copy print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2.   
  3. <html>  
  4.     <head>  
  5.   
  6.         <title>显示页面</title>  
  7.   
  8.     </head>  
  9.   
  10.     <body>  
  11.         <%=request.getParameter("content")%>  
  12.     </body>  
  13. </html>  

现在部署到tomcat中,浏览,提交,看效果。

这还没有完,因为可能会出现几种错误:
1. 当你上传图片时,提示“没有权限”,在控制台会输出“找不到Image文件夹”,那么在UserFiles里新建Image文件夹,即可

2. 当传输文字包括中文时,可能会出现显示乱码的问题,那么把showContent.jsp中的<%=request.getParameter("content")%>改成<%=new String(request.getParameter("content").getBytes("ISO-8859-1"),"utf-8")%> 即可

3. 当上传中文名的图片时,图片名称显示乱码,解决方式,在FCKeditor-2.3.zip(for java)解压出来的文件夹下,找到ConnectorServlet.java和SimpleUploadServlet.java,分别在两个文件中找到DiskFileUpload upload = new DiskFileUpload();这句,并在后面加上upload.setEncoding("utf-8");重新编译,并使用WinRAR打到 jar包FCKeditor-2.3.jar的对应位置,替换掉原来的那个,即可

4. 当浏览服务器,并新建中文名的文件夹出现乱码时,只需设置tomcat的server.xml :

[xhtml]  view plain copy print ?
  1. <Connector port="8181" protocol="HTTP/1.1"  
  2.               connectionTimeout="20000"  
  3.               redirectPort="8443" URIEncoding="utf-8" />  

以及

[xhtml]  view plain copy print ?
  1. <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" URIEncoding="utf-8" />  

红色为添加部分,即可

5. 如果你还使用了struts2来过滤,那么就修改web.xml(也可以有其他方法,但这个相对简单些)
把原来的:

[xhtml]  view plain copy print ?
  1. <filter>  
  2.   <filter-name>struts2</filter-name>  
  3.   <filter-class>  
  4.   org.apache.struts2.dispatcher.FilterDispatcher  
  5.   </filter-class>  
  6. </filter>  
  7. <filter-mapping>  
  8.   <filter-name>struts2</filter-name>  
  9.   <url-pattern>/*</url-pattern>  
  10. </filter-mapping>  

改成如下方式:

 

[xhtml]  view plain copy print ?
  1. <filter>  
  2.   <filter-name>struts2</filter-name>  
  3.   <filter-class>  
  4.   org.apache.struts2.dispatcher.FilterDispatcher  
  5.   </filter-class>  
  6. </filter>  
  7. <filter-mapping>  
  8.   <filter-name>struts2</filter-name>  
  9.   <url-pattern>/struts/*</url-pattern>  
  10. </filter-mapping>  
  11. <filter-mapping>  
  12.   <filter-name>struts2</filter-name>  
  13.   <url-pattern>*.action</url-pattern>  
  14. </filter-mapping>  
  15. <filter-mapping>  
  16.   <filter-name>struts2</filter-name>  
  17.   <url-pattern>*.jsp</url-pattern>  
  18. </filter-mapping>  
  19. <filter-mapping>  
  20.   <filter-name>struts2</filter-name>  
  21.   <url-pattern>*.js</url-pattern>  
  22. </filter-mapping>  

即可

这样,就能畅快的享受fckeditor带给你的乐趣了……

你可能感兴趣的:(java,jsp,struts2,fckeditor,编辑器)