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

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

最後更新：2018-07-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

最近一直研究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>
  
  <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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More