在J2EE應用中安裝及設置FCKeditor

英文參考網站:http://wiki.fckeditor.net/

在J2EE應用中,大量用到在web頁面上使用文本編輯器的地方,以前一直苦於找不到比較好的文本編輯器,要麼是速度太慢,要麼是功能不強,或者跟程序配合上問題較大。這兩天發現了FCKeditor,試用了一下,覺得非常好,與J2EE程序的配合也非常方便。

      基本上我們需要的編輯功能它都能夠實現,包括粘貼word格式的文檔,上傳圖片,設置圖片與文字的各種格式,預覽,最重要是它不但完全免費,而且是多國語言的,對中文的支持也非常好。
下面我簡單介紹一下如何在J2EE應用中使用FCKeditor。
1、下載
      在http://www.fckeditor.net/download/default.html下載FCKeditor的最新版本,由於我們使用的是Java,還要在
這個地址下載FCKeditor for java的工具包,這裏面提供了標籤庫和圖片上傳的jar。
2、安裝
     下載完成後,在J2EE應用中,假設爲fcktest,建立文件夾FCKeditor,將FCKeditor_2.0中的editor目錄及fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml等文件拷貝到FCKeditor目錄下。
 
     然後我們將FCKeditor-2.3/web/WEB-INF/lib中的兩個jar包拷貝到/fcktest/WEB-INF/lib目錄下,將FCKeditor-2.3/src下的FCKeditor.tld拷貝到/fcktest/WEB-INF下。
     編輯/fcktest/WEB-INF/web.xml文件,將FCKeditor-2.3/web/WEB-INF/web.xml裏的內容複製過來,修改<servlet-mapping>裏的內容爲:
 <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>

   並且添加以下內容:
  <taglib>
  <taglib-uri>/FCKeditor</taglib-uri>
  <taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
  </taglib>

3、使用

      假設我們在根目錄下建立了index.jsp頁面,在該頁面中希望使用文本編輯工具,可以參考下面的頁面代碼:
<%@ page contentType="text/html;charset=GBK"%>
<%@ taglib uri="/FCKeditor" prefix="FCK" %>
<html>
 <head>
  <title>Welcome</title>
  
 </head>
 <body>
 <form name="form1" action='success.jsp' method="post">
  <FCK:editor id="EditorAccessibility"
      width="80%" height="320"
      fontNames="宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier
New;Tahoma;Times New Roman;Verdana"
     
imageBrowserURL="/fkctest/FCKeditor/editor/filemanager/browser/default/browser.html?
Type=Image&Connector=connectors/jsp/connector"
   
linkBrowserURL="/fkctest/FCKeditor/editor/filemanager/browser/default/browser.html?
Connector=connectors/jsp/connector"
   
flashBrowserURL="/fkctest/FCKeditor/editor/filemanager/browser/default/browser.html?
Type=Flash&Connector=connectors/jsp/connector"
   
imageUploadURL="/fkctest/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
   
linkUploadURL="/fkctest/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
   
flashUploadURL="/fkctest/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
   
  </FCK:editor>
  
  <input type="submit" name="SubM" value="發表" />
 </form>
 </body>
</html>
     在該頁面中,我們使用了FCKeditor提供的標籤,具體屬性我就不詳細介紹了,估計大家一看就明白了。

4、內容傳遞

      那麼,我們如何使用FCKeditor中的內容呢,按照我們一般的做法,是將form提交到下一個頁面進行處理,在該頁面中得到編輯器中的內容,然後存入數據庫等等。有兩種方法,可以實現。
     第一,設置submit按鈕,提交後,使用request.getParameter("EditorAccessibility"),即可得到相應的內容。
     第二,直接點擊保存按鈕,即可實現提交。
5、相關設置
    圖片快速上傳,需要修改web.xml文件中的
<init-param>
   <param-name>enabled</param-name>
   <param-value>false</param-value>
  </init-param>
      將其中false改爲true,即可實現快速上傳。
     不需要服務器啓動時顯示相關信息,可修改web.xml文件中的
<init-param>
   <param-name>debug</param-name>
   <param-value>true</param-value>
  </init-param>
     將其中的true改爲false即可。
     清楚不需要的文件,editor目錄下_source文件夾可以刪除,editor/filemanager/browser/default/connectors下除jsp相關的文件外也可刪除,
editor/filemanager/upload除jsp相關的文件外也可刪除,editor/lang下的語言文件,保留英文和中文
及fcklanguagemanager.js即可,其他的一律可以刪除。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章