在Java Web应用中使用FCKeditor

下载

到FCKeditor的主页:http://www.fckeditor.net/ 下载,最新版本2.4.3。因为是在Java中使用,所以还要下载FCKeditor.Java,最新版本2.3。

将FCKeditor加到项目中

如果图省事,可以把FCKeditor解压后的整个目录复制到项目的WebRoot下。如果想去掉在Java中使用不需要的文件,在根目录下只保留editor目录,以及fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml。删除目录/editor/_source,删除/editor/filemanager/browser/default/connectors下的所有文件,删除/editor/filemanager/upload下的所有文件。

将FCKeditor.Java加到项目中

将FCKeditor.Java解压,把其中/web/WEB-INF/lib下的commons-fileupload.jar和FCKeditor-2.3.jar复制到项目的/WEB-INF/lib下。把src目录下的FCKeditor.tld复制到项目的WEB-INF下。

配置web.xml

将FCKeditor.Java解压包中/web/WEB-INF下web.xml里的内容复制到项目的web.xml里,如下:

web.xml
  1. <!-- 这个Servlet用来浏览服务器下的某个目录,可查看该目录下的文件,创建新目录,创建新文件 -->     
  2. <servlet>  
  3.     <servlet-name>Connector</servlet-name>  
  4.     <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>  
  5.     <init-param>  
  6.         <!-- 要浏览的服务器下的目录 -->  
  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>  
  19.     <servlet-name>SimpleUploader</servlet-name>  
  20.     <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>  
  21.     <init-param>  
  22.         <!-- 文件上传到服务器的目录 -->  
  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.         <!-- 此参数为是否开启上传功能 -->  
  32.         <param-name>enabled</param-name>  
  33.         <param-value>true</param-value>  
  34.     </init-param>  
  35.     <init-param>  
  36.         <param-name>AllowedExtensionsFile</param-name>  
  37.         <param-value></param-value>  
  38.     </init-param>  
  39.     <init-param>  
  40.         <param-name>DeniedExtensionsFile</param-name>  
  41.         <param-value>  
  42.             php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi   
  43.         </param-value>  
  44.     </init-param>  
  45.     <init-param>  
  46.         <param-name>AllowedExtensionsImage</param-name>  
  47.         <param-value>jpg|gif|jpeg|png|bmp</param-value>  
  48.     </init-param>  
  49.     <init-param>  
  50.         <param-name>DeniedExtensionsImage</param-name>  
  51.         <param-value></param-value>  
  52.     </init-param>  
  53.     <init-param>  
  54.         <param-name>AllowedExtensionsFlash</param-name>  
  55.         <param-value>swf|fla</param-value>  
  56.     </init-param>  
  57.     <init-param>  
  58.         <param-name>DeniedExtensionsFlash</param-name>  
  59.         <param-value></param-value>  
  60.     </init-param>  
  61.     <load-on-startup>1</load-on-startup>  
  62. </servlet>  
  63.   
  64. <servlet-mapping>  
  65.     <servlet-name>Connector</servlet-name>  
  66.     <!-- 此处假定FCKeditor解压包里的editor目录是直接放在WebRoot下的 -->  
  67.     <!-- 根据项目中FCKeditor放置的位置,此路径应做相应的修改 -->  
  68.     <url-pattern>  
  69.         /editor/filemanager/browser/default/connectors/jsp/connector   
  70.     </url-pattern>  
  71. </servlet-mapping>  
  72.   
  73. <servlet-mapping>  
  74.     <servlet-name>SimpleUploader</servlet-name>  
  75.     <url-pattern>  
  76.         /editor/filemanager/upload/simpleuploader   
  77.     </url-pattern>  
  78. </servlet-mapping>  

在页面中加入FCKeditor

input.jsp
  1. <%@ page contentType="text/html; charset=GBK" language="java"%>  
  2. <%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck"%>  
  3.   
  4. <html>  
  5.   <body>  
  6.     <form action="display.jsp" method="post">  
  7.       <!-- 下面的id属性对应于一般Form元素的name属性 -->  
  8.       <fck:editor id="testfck"  
  9.                   basePath="/fckeditortest/"  
  10.                   height="60%"  
  11.                   skinPath="/fckeditortest/editor/skins/default/"  
  12.                   toolbarSet="Default"  
  13.                   imageBrowserURL="/fckeditortest/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  14.                   linkBrowserURL="/fckeditortest/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  15.                   flashBrowserURL="/fckeditortest/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  16.                   imageUploadURL="/fckeditortest/editor/filemanager/upload/simpleuploader?Type=Image"  
  17.                   linkUploadURL="/fckeditortest/editor/filemanager/upload/simpleuploader?Type=File"  
  18.                   flashUploadURL="/fckeditortest/editor/filemanager/upload/simpleuploader?Type=Flash">  
  19.       <!-- 上面的URL要根据FCKeditor放置在项目中的位置做相应的修改 -->  
  20.       <!-- 此处假定将FCKeditor解压包中的editor目录直接放在项目的WebRoot下,fckeditortest是项目名 -->  
  21.       </fck:editor>  
  22.       <hr>  
  23.       <input type="submit" value="提交">  
  24.     </form>  
  25.   </body>  
  26. </html>  

上面是通过FCKeditor.Java的自定义标签来实现的,还可以使用JavaScript方法来实现。

display.jsp
  1. <%=request.getParameter("testfck")%>  

定制FCKeditor

在FCKeditor解压包里的fckconfig.js文件,设置了FCKeditor的一些属性。可以直接修改它来定制FCKeditor,也可以通过在页面里设置FCKeditor.Java自定义标签的属性或JavaScript对象的属性来覆盖fckconfig.js中的值。

你可能感兴趣的:(java,Web,应用服务器,servlet,fckeditor)