在SSH項目中整合FCKeditor文本編輯器

(1) 先到http://www.fckeditor.net/download 下載FCKeditor_2.6rc.zip和FCKeditor-2.3.zip。將FCKeditor_2.6rc.zip解壓縮,打開解壓後的文件夾，將其中的fckeditor更名爲FCKeditor總體複製到項目的WebRoot目錄下。而後將FCKeditor-2.3.zip壓縮包中\web\WEB-INF\lib\目錄下的兩個jar文件拷到項目的\WEB-INF\lib\目錄下，\src\com文件夾總體複製到項目中的src\下。

(2)合併web.xml，打開原項目的web.xml把壓縮包中\web\WEB-INF\web.xml中的如下內容複製到其中。

<!-- FCKeditor servlet  -->  
  <servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
         <!—此處默認爲/UserFiles/,能夠修改，前面不須要寫」/項目名」 -->
<param-value>/項目中用於存放上傳文件的文件夾/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/項目中用於存放上傳文件的文件夾/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>enabled</param-name>
            <!—此處默認爲false,表示是否開啓上傳，須要修改 -->
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name> <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!--如下servlet-mapping 添加/FCKeditor與壓縮包中總體複製到項目的文件夾路徑相對應-->
  <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> 
<!-- FCKeditor servlet  -->  

(3)刪除無用文件，刪除目錄/FCKeditor/下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml，四個文件之外的全部文件。
刪除目錄/editor/_source, 刪除/editor/filemanager/browser/default/connectors/下的全部文件，刪除/editor/filemanager/upload/下的全部文件，刪除/editor/lang/下的除了en.js, zh.js, zh-cn.js三個文件的全部文件。

(4)修改FCKeditor/fckconfig.js中的配置：
全部js配置文件最好保存成UTF-8格式，源代碼要讀取其中數據，
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替換成如下內容：

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" ;

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' ;

FCKConfig.TabSpaces = 0 ; 改成FCKConfig.TabSpaces = 1 ;
即在編輯器域內能夠使用Tab鍵。

若是你的編輯器還用在網站前臺的話，好比說用於留言本或是日記回覆時，那就不得不考慮安全了，
在前臺千萬不要使用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，圖像按鈕」功能都去掉。

找到： 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' ;

如下是該文件的具體屬性列表：
FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 編輯區的樣式表文件
FCKConfig.EditorAreaStyles = '' ; // 編輯區的樣式表風格
FCKConfig.ToolbarComboPreviewCSS =''; //工具欄預覽CSS
FCKConfig.DocType = '' ;//文檔類型
FCKConfig.BaseHref = ''; // 相對連接的基地址
FCKConfig.FullPage = false ; //是否容許編輯整個HTML文件,仍是僅容許編輯BODY間的內容
FCKConfig.StartupShowBlocks = false ;//決定是否啓用"顯示模塊"
FCKConfig.Debug = false ;//是否開啓調試功能
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; //皮膚路徑
FCKConfig.PreloadImages=... //預裝入的圖片
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //插件路徑
FCKConfig.AutoDetectLanguage = true ; //是否自動檢測語言
FCKConfig.DefaultLanguage  = 'zh-cn' ; //默認語言
FCKConfig.ContentLangDirection = 'ltr' ; //默認的文字方向,可選"ltr/rtl",即從左到右或從右到左
FCKConfig.ProcessHTMLEntities = true ; //處理HTML實體
FCKConfig.IncludeLatinEntities = true ; //包括拉丁文
FCKConfig.IncludeGreekEntities = true ;//包括希臘文
FCKConfig.ProcessNumericEntities = false ;//處理數字實體
FCKConfig.AdditionalNumericEntities = ''  ;  //附加的數字實體
FCKConfig.FillEmptyBlocks = true ; //是否填充空塊
FCKConfig.FormatSource  = true ; //在切換到代碼視圖時是否自動格式化代碼
FCKConfig.FormatOutput  = true ; //當輸出內容時是否自動格式化代碼
FCKConfig.FormatIndentator = '    ' ; //當在源碼格式下縮進代碼使用的字符
FCKConfig.StartupFocus = false ; //開啓時焦點是否到編輯器,即打開頁面時光標是否停留在fckeditor上
FCKConfig.ForcePasteAsPlainText = false ; //是否強制粘貼爲純文件內容
FCKConfig.AutoDetectPasteFromWord = true ; //是否自動探測從word粘貼文件,僅支持IE
FCKConfig.ShowDropDialog = true ;//是否顯示下拉菜單
FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符號轉換爲XML實體
FCKConfig.TabSpaces  = 0 ;//按下Tab鍵時光標跳格數,默認值爲零爲不跳格
FCKConfig.ShowBorders = true ;//合併邊框
FCKConfig.SourcePopup = false ;//彈出
FCKConfig.ToolbarStartExpanded = true ;//啓動fckeditor工具欄默認是否展開
FCKConfig.ToolbarCanCollapse = true ;//是否容許摺疊或展開工具欄
FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值
FCKConfig.FloatingPanelsZIndex = 10000 ;//浮動面板索引
FCKConfig.HtmlEncodeOutput = false ;//是否將HTML編碼輸出
FCKConfig.TemplateReplaceAll = true ;//是否替換全部模板
FCKConfig.ToolbarLocation = 'In' ;//工具欄位置,
FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 編輯區的樣式表文件
FCKConfig.BaseHref = ''; // 相對連接的基地址
FCKConfig.Debug = true/false; // 是否開啓調試功能，當調用FCKDebug.Output()時，會在調試窗中輸出內容
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 設置皮膚
FCKConfig.AutoDetectLanguage = true/false ; // 是否自動檢測語言
FCKConfig.DefaultLanguage = 'zh-cn' ; // 設置默認語言
FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默認文字方向，ltr左，rtr右
FCKConfig.FillEmptyBlocks = true/false ; // 使用這個功能，能夠將空的塊級元素用空格來替代
FCKConfig.FormatSource = true/false; // 切換到代碼視圖時，是否自動格式化代碼
FCKConfig.FormatOutput = true/false; // 當輸出內容時是否自動格式化代碼
FCKConfig.FormatIndentator = ""; // 當在「源碼格式」下縮進代碼使用的字符
FCKConfig.GeckoUseSPAN = true/false; // 是否容許SPAN標記代替B，I，U標記
FCKConfig.StartupFocus = true/false; // 開啓時是否FOCUS到編輯器
FCKConfig.ForcePasteAsPlainText = true/false;// 強制粘貼爲純文本
FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符號轉換爲XML實體
FCKConfig.TabSpaces = 0/1; // TAB是否有效
FCKConfig.TabSpaces = 4; // TAB鍵產生的空格字符數
FCKConfig.ShowBorders = true/false; // 是否合併邊框
FCKConfig.ToolbarStartExpanded = true/false; // 頁面載入時，工具欄是否展開，點「展開工具欄」時纔出現
FCKConfig.ToolBarCanCollapse = true/false; // 是否容許展開摺疊工具欄
FCKConfig.ToolbarSets = object ; // 編輯器的工具欄，能夠自行定義，刪減，可參考已存在工具欄
FCKConfig.EnterMode = 'p'; // 編輯器中直接回車，在代碼中生成，可選爲p | div | br
FCKConfig.ShiftEnterMode = 'br'; // 編輯器中Shift+回車，在代碼中生成，可選爲p | div | br
FCKConfig.ContextMenu = 字符串數組; // 右鍵菜單的內容
FCKConfig.FontColors = ""; // 文字顏色列表
FCKConfig.FontNames = ""; // 字體列表
FCKConfig.FontSizes = ""; // 字號列表
FCKConfig.FontFormats = ""; // 文字格式列表
FCKConfig.StylesXmlPath = ""; // CSS樣式列表的XML文件的位置
FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼寫檢查器
FCKConfig.IeSpellDownloadUrl = ""; // 下載拼寫檢查器的網址
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路徑
FCKConfig.SmileyImages = ''; // 表情文件名稱列表，具體參考默認設置
FCKConfig.SmileyColumns = 8; // 表情窗口顯示錶情列數
FCKConfig.SmileyWindowWidth = 320; // 表情窗口顯示寬度，此窗口會由於表情文件的改變而做調整
FCKConfig.SmileyWindowHeight = 240; // 表情窗口顯示高度，此窗口會由於表情文件的改變而做調整
FCKConfig.FullPage = true/false; // 是否容許編輯整個HTML文件，仍是僅容許編輯BODY間的內容



上傳設置
var _FileBrowserLanguage = 'php' ;         // asp | aspx | cfm | lasso | perl | php | py  
var _QuickUploadLanguage = 'php' ;         // asp | aspx | cfm | lasso | php
//第一個是文件瀏覽器使用的語言，第二個快速上傳使用的語言，改爲你須要的，JSP項目這裏就不要改了
FCKConfig.LinkUploadAllowedExtensions  = "" ;          // empty for all
FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"
//這是兩個容許和拒絕上傳的文件類型列表
FCKConfig.ImageBrowser = false ;//是否在插入圖片功能裏面啓用服務器文件瀏覽功能
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;
//Type=Image   表示文件類型是image這會使文件瀏覽器定位到文件上傳路徑/image/文件夾下面
FCKConfig.FlashBrowser = false ;//是否在插入flash功能中啓用服務器文件瀏覽功能
FCKConfig.LinkUpload = false ;//是否啓用插入連接的快速上傳功能
FCKConfig.ImageUpload = false ;//是否啓用圖片快速上傳功能
FCKConfig.FlashUpload = false ;//是否啓用flash上傳功能

(5) 調用FCKeditor
用Javascript腳本語言調用必須引用腳本文件 <script type="text/javascript" src="<%=request.getContextPath()%>/FCKeditor/fckeditor.js"></script>

而後找到要顯示編輯器的標籤處進行修改，好比原先的一個struts的文本域爲
<html:textarea property="content"></html:textarea> 
那麼如今就要在它後面加上如下這段javascript腳本。
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content') ;  //content與textarea的property或name屬性對應
oFCKeditor.BasePath = "<%=request.getContextPath()%>/FCKeditor/" ;
//寫明FCKeditor文件夾在項目中的路徑
oFCKeditor.Width=450
oFCKeditor.Height = 500;
oFCKeditor.ToolbarSet = "Default" ;//用默認工具欄
oFCKeditor.ReplaceTextarea();
</script>

上面兩處都用到了<%=request.getContextPath()%>，這是項目所在的根路徑，在項目開發過程當中通常爲「項目名」，而掛到正式服務器上時通常爲空（「」）。

(6)增長視頻上傳的功能及其工具欄按鈕
媒體插件下載地址：
http://www.webmb.com.cn/upload/media_plugin_for_FCKeditor_23_build_1054.rar
安裝步驟一：　　將 madmedia整個文件夾 拷貝至 editor/plugins/下，找到FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; 這句，查看插件路徑是否正確。      
安裝步驟二：
修改fckconfig.js，在文件末尾增長以下一行代碼，FCKConfig.Plugins.Add( 'madmedia', 'en,zh-cn' ) ;
安裝步驟三：修改fckconfig.js，找到toolbar按鈕設置的部分，將媒體按鈕加入toolbar，例如，
原來是，
FCKConfig.ToolbarSets["Default"] = [
['Image','Flash']
]

改成，
FCKConfig.ToolbarSets["Default"] = [
['Image','Flash','MadMedia']
]

FCKConfig.ContextMenu= ['Generic','Link','Anchor','Image','Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField','ImageButton','Button','BulletedList','NumberedList','Table','Form']

中也可加入
FCKConfig.ContextMenu= ['Generic','Link','Anchor','Image','Flash','MadMedia','Select','Textarea','Checkbox','Radio','TextField','HiddenField','ImageButton','Button','BulletedList','NumberedList','Table','Form']

安裝步驟四：修改插件中的/FCKeditor/editor/plugins/madmedia/media.js文件，把其中全部的包含」Flash」的字符串用」Link」替換，由於此插件的上傳的media文件的存放路徑與以Link方式上傳文件的目錄相同，並非Flash文件的上傳路徑。

安裝步驟五：爲了解決上傳中文文件文件名變爲亂碼的問題須要修改FCKeditor的源代碼，在源碼的com.fredck.FCKeditor.uploader.SimleUploaderServlet類文件中搜索語句DiskFileUpload upload = new DiskFileUpload();再其後添加一句upload.setHeaderEncoding("UTF-8");編輯完成後把整個源代碼的com包從新打成一個.jar包代替原來的.jar包。

（7）解決FCKeditor 與 struts2 上傳時出錯
緣由是struts2的filter攔截了上傳文件的動做，
//org.apache.struts2.dispatcher.Dispatcher.java
public HttpServletRequest wrapRequest(HttpServletRequest request, ServletContext servletContext) throws IOException {
        // don't wrap more than once
        if (request instanceof StrutsRequestWrapper) {
            return request;
        }
        String content_type = request.getContentType();
        if (content_type != null && content_type.indexOf("multipart/form-data") != -1) {
            MultiPartRequest multi = getContainer().getInstance(MultiPartRequest.class);
            request = new MultiPartRequestWrapper(multi, request, getSaveDir(servletContext));
        } else {
            request = new StrutsRequestWrapper(request);
        }
        return request;
    }
在這裏又找不到MultiPartRequest.class的實現類。因而[size=small]出錯了。
只要不讓struts2攔截處理上傳事件， url-pattern改成*.action就能夠解決
可是由於struts2的tag須要通過過濾器，因此若是你jsp頁面上面用到了struts2的tag，那麼就要增長一個*.jsp的url-pattern，修改web.xml文件以下：
1. <filter>  
2.         <filter-name>struts2</filter-name>  
3.         <filter-class>  
4.             org.apache.struts2.dispatcher.FilterDispatcher  
5.         </filter-class>  
6. </filter>  
7.  
8.     <filter-mapping>  
9.         <filter-name>struts2</filter-name>  
10.         <url-pattern>*.action</url-pattern>  
11.     </filter-mapping>  
12.  
13.  
14.     <filter-mapping>  
15.         <filter-name>struts2</filter-name>  
16.         <url-pattern>*.jsp</url-pattern>  
17.     </filter-mapping>
而上傳頁面調用時直接用文件名調用（如upload.jsp）。struts2只處理 *.action 的請求。
試了一下。和預想的同樣，一切OK。
（8）上傳時彈出「Security error. You probably don't have enough permissions to upload. Please check your server.」錯誤對話框的解決方法。
好比存放上傳文件的文件夾是根目錄下的upload，不一樣類型的文件會存到它的不一樣子文件夾下，好比圖片放在子文件夾Image,Flash放在子文件夾Flash，其它文件夾放在子文件夾File（正如在第4點中提到的配置文件fckconfig.js中URLFCKConfig.FlashUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=Flash' ;Type的參數值就是上傳到的子文件夾的名稱），而這些子文件夾是上傳第一個文件時程序自建的，而通常的服務器都不讓Internet訪問用戶有新建文件夾的權限，因此須要把這三個子文件夾事先建好。