FCKeditor_2.6.4 + fckeditor-java-2.4.1-bin在線編輯頁面jsp的實現

最近一直研究FCKeditor編輯,網上找了點資料。

  一,文件下載

1):FCKeditor_2.6.4.zip (主文件包,包含了主要的樣式css,模版,js文件)
地址:http://nchc.dl.sourceforge.net/sourc...itor_2.6.4.zip 

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

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

 

版本說明:

由於FckEditor for java 2.4相對於2.3而言做了許多改變,這些改變使得我們的Fckeditor配置起來更方便。例如: 
基礎包名從:com.fredck.FCKeditor 改爲 net.fckeditor. 
文件上傳SimpleUploaderServle整合到了ConnectorServlet裏面,WEB,XML的配置就簡單多了

 

  二,環境搭建

  myeclipse 7.0+apache-tomcat-6.0.18+jdk1.5

 

  三,配置

  1.新建web工程newDemo

  2.將fckeditor_2.6.4.zip中的fckeditor文件夾複製到WebRoot下,將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,共5個包導入到項目中。

  但是要注意,截止到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

 

所以千萬要注意版本一致問題。

3.在共程目錄src/下新建一個文件fckeditor.properties,添加內容:connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl 保存即可。
4.web.xml修改

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
 xmlns="http://java.sun.com/xml/ns/javaee
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  <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>
  <!-- Do not wrap this line otherwise Glassfish will fail to load this file -->
  <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
 </servlet-mapping>

</web-app>

5.修改配置文件

 

修改fckconfig.js組件配置文件

模版樣式修改

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;

默認語言修改

FCKConfig.DefaultLanguage = 'zh-cn' ;

 

文件瀏覽的路徑(FckEditor for java 2.4,舊版本如FckEditor for java 2.3等是需要修改的)

FCKConfig.LinkBrowserURL

FCKConfig.ImageBrowserURL

FCKConfig.FlashBrowserURL

 

上傳文件的路徑(新版本FckEditor for java 2.4是不需要修改的,舊版本如FckEditor for java 2.3等是需要修改的)

FCKConfig.LinkUploadURL

FCKConfig.FlashUploadURL

FCKConfig.ImageUploadURL

 

6.新建文件夾

 WebRoot下面新建 userfiles文件夾,userfiles下面新建file,image,flash,media這4個文件夾

 

7.新建jsp

在工程目錄WebRoot下新建index.jsp,result.jsp兩個文件, 
index.jsp:

  • 1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
    2. <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %> 
    3. <% 
    4. String path = request.getContextPath(); 
    5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
    6. %> 
    7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    8. <html> 
    9. <head> 
    10. <base href="<%=basePath%>"> 
    11. <title>FCKeditor.java2.4 for FCKeditor2.6.3Beate text</title> 
    12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    13. <meta http-equiv="pragma" content="no-cache"> 
    14. <meta http-equiv="cache-control" content="no-cache"> 
    15. <meta http-equiv="expires" content="0"> 
    16. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    17. <meta http-equiv="description" content="This is my page"> 
    18. </head> 
    19. <body> 
    20. <form action="result.jsp" method="post"> 
    21. <FCK:editor instanceName="content"> 
    22. <jsp:attribute name="value"> 
    23. 您的內容..... 
    24. </jsp:attribute> 
    25. </FCK:editor> 
    26. <input type="submit" value="提交"> 
    27. </form> 
    28. 
    29. </body> 
    30. </html>

  • result.jsp 
  • 1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
    2. <% 
    3. String path = request.getContextPath(); 
    4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
    5. %> 
    6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    7. <html> 
    8. <head> 
    9. <base href="<%=basePath%>"> 
    10. <title>My JSP 'result.jsp' starting page</title> 
    11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    12. <meta http-equiv="pragma" content="no-cache"> 
    13. <meta http-equiv="cache-control" content="no-cache"> 
    14. <meta http-equiv="expires" content="0"> 
    15. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    16. <meta http-equiv="description" content="This is my page"> 
    17. </head> 
    18. <body> 
    19. <%=request.getParameter("content") %> 
    20. </body> 
    21. </html>



在IE地址中輸入:http://localhost:8080/newDemo OK,成功了!

 

6.亂碼問題。

  result.jsp中加上<%request.setCharacterEncoding("UTF-8");%> 這樣亂碼問題就能解決了。

  其他問題如,上傳圖片的時候的中文名稱亂碼有待解決。。。。

 

7.注意,FCKeditor版本問題

  FckEditor for java 2.3或者早期的一些版本上需要將配置文件fckconfig.js裏面的

1.更改文件瀏覽的路徑:

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" ;

2.更改上傳文件的路徑

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;

FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;

FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;

 

   同時web.xml文件要修改爲

    <servlet>
       <servlet-name>Connector</servlet-name>
       <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
       <init-param>
           <param-name>baseDir</param-name>
           <param-value>/userfiles/</param-value>
       </init-param>
       <init-param>
           <param-name>debug</param-name>
           <param-value>true</param-value>
       </init-param>
       <load-on-startup>1</load-on-startup>
   </servlet>

   <servlet>
       <servlet-name>SimpleUploader</servlet-name>
       <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
       <init-param>
           <param-name>baseDir</param-name>
           <param-value>/userfiles/</param-value>
       </init-param>
       <init-param>
           <param-name>debug</param-name>
           <param-value>true</param-value>
       </init-param>
       <init-param>
           <param-name>enabled</param-name>
           <param-value>true</param-value>
       </init-param>
       <init-param>
           <param-name>AllowedExtensionsFile</param-name>
           <param-value></param-value>
       </init-param>
       <init-param>
           <param-name>DeniedExtensionsFile</param-name>
           <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
       </init-param>
       <init-param>
           <param-name>AllowedExtensionsImage</param-name>
           <param-value>jpg|gif|jpeg|png|bmp</param-value>
       </init-param>
       <init-param>
           <param-name>DeniedExtensionsImage</param-name>
           <param-value></param-value>
       </init-param>
       <init-param>
           <param-name>AllowedExtensionsFlash</param-name>
           <param-value>swf|fla</param-value>
       </init-param>
       <init-param>
           <param-name>DeniedExtensionsFlash</param-name>
           <param-value></param-value>
       </init-param>
       <load-on-startup>1</load-on-startup>
   </servlet>

<servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章