我總結的 把 這個控件 如何在 JavaWeb 開發中使用 FCKEditor 控件的步驟提供給大家,爲的是讓更多的 Java初學發者 花費更少的時間去做更多的事。
總體來說 4 個步驟:
One :
首先去下載FCKEditor2.6.6 (現在已經是 3.6.1 的版本了,建議還是 使用穩定的版本比較好) 下載地址: http://www.fckeditor.net/download
我們需要下載兩個文件:
(1) FCKeditor_2.6.6.zip,就是FCKEditor的控件;
(2) FCKeditor.Java(fckeditor-java-2.6-bin.zip),就是在Java代碼中使用FCKEditor的相關工具類;
two :
有了這兩個文件,使用 FCKEditor 的基礎就具備了,接下來做 2 件事情:(1)就是要把 FCKEditor控件 放到 web項目中,這個控件是用於網頁的,所以其代碼是使用JavaScript腳本編寫的,需要和web網頁一起被下載的瀏覽器上才能執行,
(2)是這個網頁上的控件因爲支持圖片的上傳與下載,所以在上傳與下載的時候需要服務端的支持,我們就的需要 FCKEditor 自身提供了相關的Java工具 用來支持這個控件的工作 ,也就是就是我們下載的第二個文件。
因此我們要做的第二件事情就是在服務端配置 Java工具,使得FCKEditor控件在處理上傳圖片時能夠正確工作。
Three:
接下來我們就開始對配置 FCKEditor 控件進行 2 項工作: (1) :
解壓縮FCKeditor_2.6.3.zip ,在其中我們能找到一個文件夾叫fckeditor,那麼將這個文件夾整個複製到你的web應用的根目錄下,就是存放jsp頁面的地方。
(2) :
解壓縮fckeditor-java-2.6-bin.zip,將這樣幾個jar文件複製到web應用的WEB-INF\lib目錄中
(commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
imageinfo-1.9.jar
java-core-2.6.jar
slf4j-api-1.5.8.jar
slf4j-simple-1.5.8.jar
)
其中最後一個文件在這個zip包中可能不存在,那麼你可以去這個鏈接地址下載一個文件叫 fckeditor-java-demo-2.6.war
(
下載地址1:
http://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.6/
下載地址2:
http://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.6/fckeditor-java-demo-2.6.war/download
)
connector.resourceType.file.extensions.allowed=|jpg|gif|png|rar|zip|txt|doc|wma|wmv|mp3|flv|swf|
connector.resourceType.media.extensions.allowed=|wma|wmv|mp3|flv|swf|
connector.resourceType.image.extensions.allowed=|jpg|png|gif|
connector.resourceType.flash.extensions.allowed=|swf|
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
fckeditor.basePath = /fckeditor (fck資源所在webapp中的目錄)
fckeditor.skinPath = /skins/office2003/ (fck樣式,這裏可選默認和office2003的樣式)
fckeditor.height = 630 (fck編輯器的高度)
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>
Four:
好了,現在你已經完成了配置的過程,接下來我們需要在jsp中使用FCKEditor控件了,在需要使用這個控件的jsp文件的開頭添加標籤庫的引入語句:
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>,
在使用控件進行文本格式化輸入的地方(原來你可能使用的textarea標籤)使用如下的內容來替換原來的輸入控件:
<form action="result.jsp" method="post">
<FCK:editor instanceName="content">
<jsp:attribute name="value">
內容.....
</jsp:attribute>
</FCK:editor>
<input type="submit" value="提交">
</form>
<FCK:editor instanceName="content">
<jsp:attribute name="value">
內容.....
</jsp:attribute>
</FCK:editor>
<input type="submit" value="提交">
</form>
其中 instanceName 屬性的 值就相當於 form 表單中的 input 的 name 值。 就是 表單 提交 時候 的 鍵值對 中 的鍵 的名字。
<FCK:editor instanceName="content" height="400pt">
<jsp:body>
<FCK:config SkinPath="${skin}"/>
</jsp:body>
</FCK:editor>
<jsp:body>
<FCK:config SkinPath="${skin}"/>
</jsp:body>
</FCK:editor>
最後 在 創建一個 result 頁面 , 在裏面 用 你想用的用的方式接收一下 輸出 即可:
例如 這樣 : <%=request.getParameter("content") %>
OVER !!!