工作前的預備
版本是FCKeditor_2.4.2.zip【組件的主文件包】,FCKeditor.Java 2.3.zip【這裡面提供了標簽庫和圖片上傳的jar】。這些都可以在http://www.fckeditor.net 網站下載到!
配置
1. 新建工程compass,在WebRoot文件夾下新建文件夾FCKeditor(用來存放FCKeditor相關文件,
記得大小寫要一致,因為假如你需要改變的話變化的文件比較多,而且還不確定是否改全了)
2. 將FCKeditor_2.4.2包中的 editor 文件夾和fckconfig.js、fckeditor.js、fckstyles.XML、fcktemplates.xml
這四個文件放到項目中的 FCKeditor 目錄。
3. 將FCKeditor.Java -2.3.zip 包中的 webWEB-INFlib 下的兩個 jar 文件到項目的 WebRootWEB-INFlib目錄下
4. 將FCKeditor.Java -2.3.zip 包中的 src 下的 FCKeditor.tld 文件到項目的 WebRootWEB-INF 目錄
5. 在 WebRoot 目錄下新建 UserFiles 文件夾,在此文件夾下新建 Image、 Flash 、File、Media四個文件夾 ,他們分別用來存放上傳的圖片、動畫、文件、媒體文件
6. 修改fckconfig.js組件配置文件【說明一下,你可以在配置文件裡搜索等號前面的信息來確定某一項做更改】:
A、FCKConfig.SKINPath = FCKConfig.BasePath + 'skins/silver/' ;
這是組件的樣式模板,好確定你到底需要使用哪中樣式,這個根據你自己的喜好更改,
B、FCKConfig.DefaultLanguage = 'zh-cn' ;
這個是確定你需要使用哪中語言,設定成上面的表示使用簡體中文;
C、更改文件浏覽的路徑:
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" ;
把相應的信息屏蔽掉,使用上面的
D、更改上傳文件的路徑
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' ;
把相應的信息屏蔽掉,使用上面的
7. 修改 web.xml 文件,加入以下內容 :
在FCKeditor.Java -2.3.zip 包中有個webWEB-INFWEB.XML,把這個節點裡面的內容復制到你的工程裡面的相應的位置,值得說明的地方是:
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<!-- 此為文件浏覽路徑,可以只有選擇修改,但切記不可改成“/[工程名]/UserFiles/”
因為他目前已經是在工程的根目錄下來運行的,故假如要把默認浏覽的文件目錄為
webrootupload目錄,之需要改變成:/upload/,即可 -->
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<!-- 此為文件上傳路徑,可以只有選擇修改,但切記不可改成“/[工程名]/UserFiles/”
因為他目前已經是在工程的根目錄下來運行的,故假如要把上傳的文件放到webrootupload目錄下,
之需要改變成:/rpload/,即可 -->
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<!-- 記得要改變這裡,把FALSE改變成TRUE,這個是是否啟用上傳功能 -->
<param-name>enabled</param-name>
<param-value>true</param-value>
</init-param>
<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>
優化
以上都是把組件嵌入進工程的 配置過程,下面我們來把組件壓縮優化一下,把無用的文件給剔除掉:
刪除 WebRootFCKeditoreditorfilemanagerrowserdefaultconnectors 目錄下所有的文件,這些是用來浏覽文件的,對於jsp的話是使用了 servlet 來處理,所以這些文件都是多余的
刪除 WebRootFCKeditoreditorfilemanagerupload 目錄下所有的文件
刪除 WebRootFCKeditoreditorlang 目錄下不需要的語言,如保留中文【zh-cn.js】和英文[EN.js]還有 fcklanguagemanager.js 文件
刪除 WebRootFCKeditoreditorskins 目錄下不需要的皮膚文件,有三種皮膚,可根據需要進行刪除
JSP頁面上的使用
★首先在test.jsp頁面的頁頭加上標簽使用語句【不需要做目錄調整,已經切實可行】:
★然後在頁面的相應位置增加調用語句,對於FCK標簽,裡面還可以增加很多屬性,當然也可以不加,注重下面粗體的地方,我下面使用了2個比較常用的屬性,一個是高度的調整,另一個是組件風格
This is FCKeditor demo!
★接收參數可以這麼寫
其它
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、注重上傳的文件名不能有中文,否則無法正常顯示或鏈接下載。