jsp中FCKEditor網頁編輯器的配置方法

首先在官方網站下載fckeditor,注意有兩個包，一個是主檔案，一個是jsp整合包的。

1、解壓FCKeditor_2.2.zip,(FCKeditor主檔案)，將FCKeditor目錄複寫到網站根目錄下。
2、解壓FCKeditor-2.3.zip,(jsp,FCKeditor整合包)，作用：This is the JSP Integration Pack for using FCKeditor inside a java server page without the complexity of using a Java scriptlets or the javascript api。
3、將FCKeditor-2.3/web/WEB-INF/web.xml中的兩個servlet,servlet-mapping定義複製到自已項目的web.xml檔案中。

修改其中

代碼如下	複製代碼
<servlet-mapping> <servlet-name>Connector</servlet-name> <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>SimpleUploader</servlet-name> <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern> </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>

4、將FCKeditor-2.3/web/WEB-INF/lib目錄下檔案複製到自已項目的lib檔案夾中
5、在需使用FCKeditor的jsp介面中加入：

// 檔案開頭處加入

代碼如下

複製代碼

<%@ taglib uri=”http://fckeditor.net/tags-fckeditor” prefix=”FCK” %> //要使用的地方加入 <FCK:editor id=”content” basePath=”/FCKeditor/” imageBrowserURL=”/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector” linkBrowserURL=”/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector” flashBrowserURL=”/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector” imageUploadURL=”/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image” linkUploadURL=”/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File” flashUploadURL=”/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash”> this is default content :) </FCK:editor>

調用FCKeditor

代碼如下

複製代碼

(1).FCKeditor自訂標籤 (必須加標頭檔 <%@ taglib uri="/FCKeditor" prefix="FCK" %> ) 顯示 <form action="show.jsp" method="post" target="_blank"> <FCK:editor id="content" basePath="/FCKeditor/" width="700" height="500" skinPath="/FCKeditor/editor/skins/silver/"  toolbarSet = "Default" > input </FCK:editor> <input type="submit" value="Submit"> </form> (2).script指令碼語言調用 (必須引用 指令檔 <script type="text/javascript" src="/FCKeditor/fckeditor.js"></script> ) 顯示 <form action="show.jsp" method="post" target="_blank"> <table border="0" width="700"><tr><td> <textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea> <script type="text/javascript"> var oFCKeditor = new FCKeditor('content') ; oFCKeditor.BasePath = "/FCKeditor/" ; oFCKeditor.Height = 400; oFCKeditor.ToolbarSet = "Default" ; oFCKeditor.ReplaceTextarea(); </script> <input type="submit" value="Submit"> </td></tr></table> </form> (3).FCKeditor API 呼叫 (必須加標頭檔 <%@ page language="java" import="com.fredck.FCKeditor.*" %> ) <form action="show.jsp" method="post" target="_blank"> <% FCKeditor oFCKeditor ; oFCKeditor = new FCKeditor( request, "content" ) ; oFCKeditor.setBasePath( "/FCKeditor/" ) ; oFCKeditor.setValue( "input" ); out.println( oFCKeditor.create() ) ; %> <br> <input type="submit" value="Submit"> </form> 8.輸出： <% String content = request.getParameter("content"); out.print(content); %> ok!

另：FCKeditor for Java的上傳是通過servlet進行的，不是Jsp，所以設定檔web.xml中的"editor/filemanager/browser/default/connectors/jsp/connector" jsp/connector 目錄並不存在，只要配置好FCKeditor.java就行了

 

編輯器菜單工具配置

1、fckconfig.js總設定檔，可用記錄本開啟，修改後將檔案存為utf-8 編碼格式。找到：

FCKConfig.TabSpaces = 0 ; 改為FCKConfig.TabSpaces = 1 ; 即在編輯器域內可以使用Tab鍵。

2、如果你的編輯器還用在網站前台的話，比如說用於留言本或是日記回複時，那就不得不考慮安全

了，在前台千萬不要使用Default的toolbar，要麼自訂一下功能，要麼就用系統已經定義好的Basic，也就是基本的toolbar，找到：

代碼如下	複製代碼
FCKConfig.ToolbarSets["Basic"] = [ ['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview'] ] ;

這是改過的Basic，把映像功能去掉，把添加連結功能去掉，因為映像和連結和flash和映像按鈕添加功能都能讓前台頁直接存取和上傳檔案， fckeditor還支援編輯域內的滑鼠右鍵功能。

代碼如下	複製代碼
FCKConfig.ContextMenu = [ 'Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox', 'Radio','TextField','HiddenField',/*'ImageButton',*/'Button','BulletedList', 'NumberedList','TableCell','Table','Form'] ;

這也是改過的把滑鼠右鍵的“連結、映像，FLASH，映像按鈕”功能都去掉。

3、找到： FCKConfig.FontNames =

代碼如下	複製代碼
'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

加上幾種我們常用的字型 ：

代碼如下	複製代碼
FCKConfig.FontNames = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS; Courier New;Tahoma;Times New Roman;Verdana' ;

4、注意上傳的檔案名稱不能有中文，否則無法正常顯示或連結下載

 

其它問題：

在struts+spring+hibernate中使用，上傳映像功能中可能會出現報：
The output format must have a ‘{http://xml.apache.org/xalan}content-handler’ property!
錯的情況，將WEB-INF/lib目錄下xalan*.jar刪除試試
 
安全問題：
假如在前台讓普通使用者也能使用FCKEditor,要注意相關安全問題,在前台使用時,不要使用預設的ToolBar，
要將添加映像，flash，映像域按鈕去掉
在fckconfig.js中大約78行配置  那些數組中的值就像當於介面上的一個功能，你可以強行把每組值試出來代表什麼。：P
到此安裝FCKeditor就完成了，相關詳細配置你可以看FCKeditor-2.3.zip,(jsp,FCKeditor整合包)檔案夾中web/_samples目錄下的例子。