fck文章-轉

最後更新：2018-12-03 來源：互聯網

上載者：User

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

FCKeditor 2.6.3與FCKeditor.java 2.4在JSP中配置

1.FCKeditor 介紹

FCKeditor 這個開源的HTML 文字編輯器可以讓web 程式擁有如MS Word 這樣強大的編輯功能，.FCKeditor 支援當前流行的瀏覽器如，先抓個圖讓大家一睹她的芳容:

各位不要懷疑這是從OFFICE2003上抓的圖哦，等您把這篇文章看完之後在您的網也中也可以擁有這樣的效果了哦^_^，廢話少說，轉到正題。

2．準備工作：

環境：winddows XP、tomcat6.0、JDK1.6

下載：

1）：FCKeditor_2.6.3b.zip

地址：http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.6.3b.zip

2）：fckeditor-java-2.4-bin.zip （JAVA支援包）地址http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-2.4-bin.zip

3）slf4j-1.5.2.zip 地址：http://slf4j.org/dist/slf4j-1.5.2.zip

3.安裝：

1）解壓FCKeditor_2.6.3b.zip，將解壓的到的fckeditor整個檔案夾完整複製到工程目錄WebRoot下。

2）解壓fckeditor-java-2.4-bin.zip，在fckeditor- java-2.4-bin的解壓縮檔案中提取出4個JAR包，分別為fckeditor-java-core-2.4.jar、commons- fileupload-1.2.1.jar、commons-io-1.3.2.jar、slf4j-api-1.5.2.jar，

3）解壓slf4j-1.5.2.zip，只需提取slf4j- jdk14-1.5.2.jar包

4）將2、3步提取的5個包都都導如工程目錄WEB-INF/bin中

（

插句題外話，剛開始我只匯入了第2步截壓出的4個包，啟動TOMCAT的時候提示找不到類 org.slf4j.impl.StaticLoggerBider，再看官方文檔，上面說還要下SLF4J，於是便到slf4j官網下了個最新版，但不知道org.slf4j.impl.StaticLoggerBider類在哪個包裡，這是我最笨之處，我將所有包都導進去慢慢找（汗……），然後把多餘包給移除了（通過項目右鍵→Properties→Java Build Path→Libraries，移除多餘包），再重啟，現在不報找不到類的錯了，但出現了上百條 java.lang.StackOverflowError錯誤（再汗……），查了N久，沒結果，然後在MyEclipse的lib目錄下還發現了一大堆剛才移除的包，接著我就把他們統統右鍵Delete刪除，再重啟，嘿嘿，OK了。

）

4.配置

1)在共程目錄src/下建立一個檔案fckeditor.properties，新增內容：connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl 儲存即可。

2)修改web.xml，用來提供上傳功能支援，

新增內容：
Xml代碼

   1. <servlet>
   2.
   3.       <servlet-name>Connector</servlet-name>
   4.
   5.         <servlet-class>
   6.
   7.           net.fckeditor.connector.ConnectorServlet
   8.
   9.       </servlet-class>
10.
11.       <load-on-startup>1</load-on-startup>
12.
13. </servlet>
14.
15. <servlet-mapping>
16.
17.       <servlet-name>Connector</servlet-name>
18.
19.       <url-pattern>
20.
21.         /fckeditor/editor/filemanager/connectors/*
22.
23.       </url-pattern>
24.
25.     </servlet-mapping>

<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.應用

在工程目錄WebRoot下建立index.jsp,result.jsp兩個檔案，

index.jsp:
Html代碼

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>FCKeditor.java2.4 for FCKeditor2.6.3Beate text</title>

</head>

<body>

<FCK:editor instanceName="content">

<jsp:attribute name="value">

您的內容.....

</jsp:attribute>

</FCK:editor>

</form>

</body>

</html>

Html代碼

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

result.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'result.jsp' starting page</title>

</head>

<body>

<%=request.getParameter("content") %>

</body>

</html>

在IE地址中輸入：http://localhost:8080/FCKtest OK,成功了！

6．不足之處

世界上沒有絕對完美的女子（不知道你是否發現了完美的女孩，錯了不要打我），FCK也一樣。

1）在文字框中輸入中文提交後得到的中文亂碼。

解決辦法：

Result.JSP中來轉碼：

new String(request.getParameter(“content”).getByte(iso-8859-1),”UTF-8”)

實驗下，嘿嘿，”漢化”成功！

2）上傳中文名圖片後儲存的中文圖片名亂碼

解決辦法：下載www.pjwqh.cn.jar包，替換以前下載的 fckeditor-java-core-2.4.jar包，

OK，上傳中文圖片名顯示正常了，

3）點擊瀏覽伺服器後，選擇剛上傳的中文圖片，圖片在預覽視窗中不能顯示

解決辦法：

修改TOMCAT安裝目錄config下的server.xml檔案，在<Connector/>標籤內加上 URIEncoding="UTF-8"。

OK，中文圖片正常顯示。

4）關與FLASH的上傳

A.上傳中文檔案名稱FLASH時，有時候彈出沒有許可權，或者是檔案類型錯誤，有時候上傳正常。

B.上傳英文或者數字名FLASH時，視窗一直處與等待狀態，過一會兒關閉視窗，再通過瀏覽伺服器按鈕可以看到FLASH已經成功上傳。

C.有時候如過上傳成功了，預覽視窗也不能播放。

D．有時候無論使用什麼語言的檔案名稱都可以上傳成功。

但只要你是使用的英文或則數字檔案名稱，就能100%上傳。

所以關於這個問題估計還是編碼引起的。

5）。FCKeditor2.6.2上傳檔案功能與Struts 2 不相容的問題。

解決辦法：

讓Struts2僅處理*.action的請求。修改設定檔web.xml:

將Struts2處理所有web請求的過濾器配置

<filter-mapping>

<filter-name>struts2</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

改為：僅處理.action或.jsp請求

<filter-mapping>

<filter-name>struts2</filter-name>

<url-pattern>*.action</url-pattern>

</filter-mapping>

<filter-mapping>

<filter-name>struts2</filter-name>

<url-pattern>*.jsp</url-pattern>

</filter-mapping>

備忘：以上設定檔的更改會造成Struts2 標籤在頁面中不顯示

應該在web.xml檔案中加入以下配置：

<filter-mapping>

<filter-name>struts2</filter-name>

<url-pattern>/struts/*</url-pattern>

</filter-mapping>

附：FCKeditor的編碼是個老大難，想真正讓他很好的處理中文是件非常不容易的事情，例如上面費了好大勁將中文名圖片的上傳和瀏覽功能修改好之後，FLASH又出問題。這些都是編碼惹的禍。

這裡附上另外一種解決辦法，可以屏蔽掉上面不足之處的1、2、3、4部的操作，下載 FCKeditor2.4ByTxdnet.Cn.jar這個包，用來替換上面的www.pjwqh.cn.jar包，剩下的工作就是等著你測試了，這個方法方便、簡單、有校，他解決中文亂碼的原理是將上傳的檔案無論是中文檔案名稱或者英文檔案名稱改用系統目前時間來替換，既改成了數字，這樣就永遠不存在亂碼和圖片無法顯示的問題了。（本方法又Happy漫步者提供）

7．總結：

FCKeditor2.6.3 Beta在2.6.2基礎上有了很大改進，FCKeidtor 2.6.3Beta在配置上進行了大量簡化，讓使用者更易輕鬆上手，但FCKeditor的編碼是個老大難問題，特別在檔案上傳功能上表現的尤為突出，希望FCK官方在以後的版本中能夠修正這個BUG。

本文轉自：http://michaelzqm.javaeye.com/blog/675300

本文章原先以中文撰寫並發佈於 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

fck文章-轉

聯繫我們

熱門內容

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

fck文章-轉

聯繫我們

熱門內容

熱門主題

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support