FCK編輯器（完整詳解）
一直都沒找到完整的Fck編輯器的完整詳解，今天無意中發現了，所以就複製下來了；
javascript呼叫方式：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript” src=”FCKeditor/fckeditor.js”></scrīpt>
<textarea name=”content” cols=”80″ rows=”4″>
</textarea>
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor(”content”);
oFCKeditor.BasePath = “FCKeditor/”;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = “Default”;
oFCKeditor.ReplaceTextarea();
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
如果想要使用從資料庫讀來的文字資料或者是後臺來自檔案的txt/html文字資料。
只要在
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<textarea name=”content” cols=”80″ rows=”4″>
</textarea>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
中加入自己的顯示內容的formbean對應欄位即可
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<textarea name=”content” cols=”80″ rows=”4″>
<c:out value=”${contentData}” />
</textarea>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
這樣內容就會被顯示在FCKeditor編輯框中了，點選提交按鈕以後就可以在後臺的相應java action中得到content引數中的內容就是頁面上FCKeditor中的內容資料了。可以在struts/jsf中使用。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
由於給FCKeditor瘦身，所以常會報缺少物件支援等錯誤，只要在FCKeditor/editor/lang中加上相應的js語言檔案即可。如果載入頁面失敗（FCKeditor未定義）還有一個可能就是引用FCKeditor/fckeditor.js檔案路徑不對！
關於FCKeditor瘦身要點如下：
1.將FCKeditor目錄下及子目錄下所有以“_”下劃線開頭的資料夾刪除
2.FCKeditor根目錄下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml，其餘全部刪除
3.將editor/filemanager/upload目錄下檔案及資料夾清空
4.將/editor/filemanager/browser/default/connectors/下的所有檔案刪除
5.還可以將editor/skins目錄下的面板檔案刪除，只留下default一套面板（如果你不需要換面板的話）
6.還可以將editor/lang目錄下檔案刪除，只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js檔案
7.如果你是使用javascrīpt來呼叫載入FCKeditor，那麼就不需要在web.xml中配置fckeditor的tag檔案。
8.還有一個問題剛開始使用FCKeditor的人常會遇到就怎麼控制它的toolbar的大小和元素排列，其實很簡單。
在fckconfig.js中用這樣的標籤[]來劃分每行的元素的多少，這樣就可以控制toolbar的長短和大小了，具體示例參看：fckconfig.js中的toolbarset[”Default”]
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
用fckconfig.js中的一些選項來控制toolbarset中控制元件的功能，實現功能裁剪：
1)：取消超連結中的瀏覽伺服器和上傳功能，方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.LinkBrowser = true;
FCKConfig.LinkUpload = true;
改為：
FCKConfig.LinkBrowser = false;
FCKConfig.LinkUpload = false;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2)：取消圖片連結中的瀏覽伺服器和上傳功能，方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.ImageUpload = true;
FCKConfig.ImageBrowser = true;
改為：
FCKConfig.ImageUpload = false;
FCKConfig.ImageBrowser = false;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
3)：Dlg Button中取消高階功能，方法如下：
FCKConfig.LinkDlgHideAdvanced = false ;
FCKConfig.ImageDlgHideAdvanced = false ;
改為：
FCKConfig.ImageDlgHideAdvanced = true ;
FCKConfig.LinkDlgHideTarget = true ;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
下一篇介紹FCKeditor的上傳和瀏覽伺服器功能，以及如何在裡面實現動態
超連線，轉發到servlet經過filter以後去呼叫伺服器的action
如何實現對應使用者瀏覽自己的圖片的列表實現！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FCKeditor整合java servlet可以實現檔案的上傳和伺服器端列表讀取功能FCKeditor自己提供了兩個servlet來分別實現上傳檔案功能，和讀取伺服器端檔案列表功能，這兩個servlet分別為：
com.fredck.FCKeditor.connector.ConnectorServlet（讀取檔案列表）
com.fredck.FCKeditor.uploader.SimpleUploaderServlet（實現檔案上傳）
1.瀏覽伺服器端檔案列表
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
web.xml檔案中，比如：ConnectorServlet中的配置選項：
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
意思是在瀏覽伺服器上的baseDir配置指定裡面的所有檔案及其目錄結構列表。
如果你的baseDir沒有配置，Connector將會自動建立一個預設的資料夾
UserFiles，對應的ConnectorServlet中init()方法中程式碼如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
baseDir = getInitParameter(”baseDir”);
if (baseDir == null)
baseDir = “/UserFiles/”;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
還想說一下的是，FCKeditor的client呼叫server的servlet方法採用的是Ajax思想來實現。當你點選瀏覽伺服器(browser server)的時候就會觸發一個非同步的javascrīpt + xmlhttp的呼叫響應，後臺的servlet會去完成你要請求的事件，然後資料以xml方式返回給client來解析。很明顯，你要實現去資料庫或者其他的檔案系統請求列表，你只要修改
ConnectorServlet中兩個私有方法：getFolders 和 getFiles
讓它去你指定的地方得到檔案列表即可，這樣你的檔案可以放在任何你指定目錄下。多說一句，很多人都想知道個人blog系統中怎麼實現上傳檔案以後對應使用者瀏覽自己的列表的，我的做法很簡單，建立你使用者名稱的資料夾，你上傳只能上傳到你的目錄夾，瀏覽可以通過程式指定瀏覽對應使用者下的資料夾即可，這個時候你要修改Connectorservlet中的路徑即可！
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2.超連線重定位問題
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor可以插入超連線，實現對檔案的預覽功能，只要我們稍微改變我們可以使FCKeditor編輯器支援對任意檔案系統下的任意檔案的客戶端瀏覽和下載儲存！FCKeditor本來提供的是相對URL超連結，只要我們修改ConnectorServlet中傳遞給客戶端的地址的時候，把它改寫成絕對URL然後再通過我們自己的filter的servlet實現重定向去一個下載/瀏覽檔案的struts的action方法就可以實現在客戶端對超連線檔案的下載和瀏覽！說一下具體做法吧：
1)：修改ConnectorServlet傳遞給客戶端javascrīpt的路徑，程式碼如下：
String currentUrl = “http://” + request.getserver +request.getServerPort + request.getContextPath + resourcePath;
以上程式碼請在ConnectorServlet的doGet()裡面拼裝！在呼叫CreateCommonXml()私有方法的時候引數傳入：
myEl.setAttribute(”path”,currentPath);
myEl.setAttribute(”url”,currentUrl);
提醒一下resourcePath為在web.xml配置檔案中ConnectorServlet中的一個初始化引數配置，等一下利用filter實現對超連線的重定位就提取URL中的這個配置引數來判斷，配置如下：
<init-param>
<param-name>resourcePath</param-name>
<param-value>/fileSystem/</param-value>
</init-param>
2)：建立你的filter servlet，實現對URL的截獲，對符合要求的URL進行重定位到你的對應action中去即可
3)：實現你的對應action來實現檔案的上傳和下載功能即可！
4)：擴充套件功能－實現對URL的加密，對連線的URL中加上一串字元，最後幾位作為演算法校驗，對不符合要求的URL連線,filter將會拒絕重定位到指定action。此外利用自己寫的擴充套件類還可以實現對超連線的檔案型別進行限制，比如你只能超連線JPG|GIF|DOC|TXT|HTML等幾種字尾名的檔案，對其他檔案即使你指定超連線也讓你瀏覽和下載，這些都可以在web.xml中通過修改對應servlet的配置檔案的初始化引數實現。
3.頁面javascrīpt修改
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
瀏覽伺服器的功能對應的html/javascrīpt相關的檔案為：browser.html和frmresourcelist.html對應你想傳遞的資訊你可以append在檔名的字串後面，在GetFileRowHtml（）的javascrīpt函式中實現對檔名的擷取，這樣client只會顯示檔名，而你可以得到檔案的資料庫唯一標識，任何你想要的資訊你都可以通過修改ConnectorServlet中的私有方法getFiles()來實現，只要修改頁面frmresurcelist.html中的GetFileRowHtml（）中傳入變數fileName即可。你還可以在點選選中檔案的時候實現一個你自己的Ajax呼叫，一切取決你的專案需要！
4.我不是一個javascrīpt高手，其實如果我對javascrīpt瞭解多一些也許對客戶端的程式碼修改以後做出更眩的功能。可以更好的完成對FCKeditor裁剪。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
5.注意點
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
無論怎麼修改別人的東西，請一定尊重開源精神！
很多人配置好了FCKeditor的上傳功能以後常會遇到xmlhttp request 404 error,後面是一串路徑，其實就是你的servlet-mapping中的路徑不對，你只要把xmlhttp request errot 404 後面跟的路徑，copy到你的web.xml中對應紅色文字的位置，如下：
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
別忘了SimpleUploader的servlet－mapping也要做同樣的修改！
還有一個錯誤就是http 500錯誤，這個可能是你的URL請求不對，應該和FCKeditor沒關係的!
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
fckconfig.js總配置檔案，可用記錄本開啟，修改後將檔案存為utf-8 編碼格式。找到：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.TabSpaces = 0;
改為：
FCKConfig.TabSpaces = 1;
即在編輯器域內可以使用Tab鍵。
如果你的編輯器還用在網站前臺的話，比如說用於留言本或是日記回覆時，那就不得不考慮安全了，
在前臺千萬不要使用Default的toolbar，要麼自定義一下功能，要麼就用系統已經定義好的Basic，
也就是基本的toolbar，找到：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.ToolbarSets[”Basic”] = [
[’Bold’,'Italic’,'-’,'OrderedList’,'UnorderedList’,'-’,’Unlink’,'-’,'Style’,'FontSize’,'TextColor’,'BGColor’,'-’,
‘Smiley’,'SpecialChar’,'Replace’,'Preview’] ];
這是改過的Basic，把影象功能去掉，把新增連結功能去掉，因為影象和連結和flash和影象按鈕新增功能都能讓前臺頁直接訪問和上傳檔案， fckeditor還支援編輯域內的滑鼠右鍵功能。
FCKConfig.ContextMenu = [’Generic’,’Anchor’,’Flash’,'Select’,'Textarea’,'Checkbox’,'Radio’,'TextField’,'HiddenField’,
’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’;
新增檔案 /TestFCKeditor/test.jsp:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<%@ page language=”java” import=”com.fredck.FCKeditor.*” %>
<%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %>
<script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script>
<%–
三種方法呼叫FCKeditor
1.FCKeditor自定義標籤 (必須加標頭檔案 <%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %> )
2.script指令碼語言呼叫 (必須引用 指令碼檔案 <script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script> )
3.FCKeditor API 呼叫 (必須加標頭檔案 <%@ page language=”java” import=”com.fredck.FCKeditor.*” %> )
–%>
<%–
<form. action=”show.jsp” method=”post” target=”_blank”>
<FCK:editor id=”content” basePath=”/TestFCKeditor/FCKeditor/”
width=”700″ height=”500″ skinPath=”/TestFCKeditor/FCKeditor/editor/skins/silver/”
toolbarSet = “Default”>
內容
</FCK:editor>
<input type=”submit” value=”Submit”>
</form>
–%>
<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 FCKeditor = new FCKeditor(’content? ;
oFCKeditor.BasePath = “/TestFCKeditor/FCKeditor/” ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = “Default” ;
oFCKeditor.ReplaceTextarea();
</script>
<input type=”submit” value=”Submit”>
</td>
</tr>
</table>
</form>
<%–
<form. action=”show.jsp” method=”post” target=”_blank”>
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, “content” ) ;
oFCKeditor.setBasePath( “/TestFCKeditor/FCKeditor/” ) ;
oFCKeditor.setValue( “input” );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type=”submit” value=”Submit”>
</form>
–%>
新增檔案/TestFCKeditor/show.jsp:
<%
String content = request.getParameter(”content”);
out.print(content);
%>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
1、適時開啟編輯器
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
很多時候，我們在開啟頁面的時候不需要直接開啟編輯器，而在用到的時候才打開，這樣一來有很好的使用者體驗，另一方面可以消除FCK在載入時對頁面開啟速度的影響，點選“Open Editor”按鈕後才打開編輯器介面。
實現原理：
使用JAVASCRIPT版的FCK，在頁面載入時（未開啟FCK），建立一個隱藏的TextArea域，這個TextArea
的name和ID要和建立的FCK例項名稱一致，然後點選”Open Editor”按鈕時，通過呼叫一段函式，使用
FCK的ReplaceTextarea()方法來建立FCKeditor，程式碼如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript”>
<!–
function showFCK(){
var FCKeditor = new FCKeditor( ‘fbContent’ ) ;
oFCKeditor.BasePath = ‘/FCKeditor/’ ;
oFCKeditor.ToolbarSet = ‘Basic’ ;
oFCKeditor.Width = ‘100%’ ;
oFCKeditor.Height = ‘200′ ;
oFCKeditor.ReplaceTextarea() ;
}
//–>
</script>
<textarea name=”fbContent” id=”fbContent”></textarea>
2、使用FCKeditor 的 API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor編輯器，提供了非常豐富的API，用於給End User實現很多想要定製的功能，比如最基本的資料驗證，如何在提交的時候用JS判斷當前編輯器區域內是否有內容，FCK的API提供了GetLength()方法；
再比如如何通過指令碼向FCK裡插入內容，使用InsertHTML()等；
還有，在使用者定製功能時，中間步驟可能要執行FCK的一些內嵌操作，那就用ExecuteCommand()方法。
詳細的API列表，請檢視FCKeditor的Wiki。而常用的API，請檢視FCK壓縮包裡的_samples/html/sample08.html。此處就不貼程式碼了。
3、外聯編輯條（多個編輯域共用一個編輯條）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
這個功能是2.3版本才開始提供的，以前版本的FCKeditor要在同一個頁面裡用多個編輯器的話，得一個個建立，現在有了這個外聯功能，就不用那麼麻煩了，只需要把工具條放在一個適當的位置，後面就可以無限制的建立編輯域了。
要實現這種功能呢，需要先在頁面中定義一個工具條的容器：<div id=”xToolbar”></div>，然後再根據這個容器的id屬性進行設定。
JAVASCRIPT實現程式碼：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<div id=”xToolbar”></div>
FCKeditor 1:
<script. type=”text/javascript”>
<!–
// Automatically calculates the editor base path based on the _samples directory.
// This is usefull only for these samples. A real application should use something like this:
// oFCKeditor.BasePath = ‘/fckeditor/’; // ‘/fckeditor/’ is the default value.
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf(’_samples’));
var FCKeditor = new FCKeditor( ‘FCKeditor_1′ );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;
oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’;
oFCKeditor.Create();
//–>
</script>
<br />
FCKeditor 2:
<script. type=”text/javascript”>
<!–
FCKeditor = new FCKeditor( ‘FCKeditor_2′ );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;
oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’;
oFCKeditor.Create();
//–>
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
此部分的詳細DEMO請參照_samples/html/sample11.html，_samples/html/sample11_frame.html
4、檔案管理功能、檔案上傳的許可權問題
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
一直以來FCKeditor的檔案管理部分的安全是個值得注意，但很多人沒注意到的地方，雖然FCKeditor在各個Release版本中一直存在的一個功能就是對上傳檔案型別進行過濾，但是她沒考慮過另一個問題：到底允許誰能上傳？到底誰能瀏覽伺服器檔案？
之前剛開始用FCKeditor時，我就出現過這個問題，還好NetRube（FCKeditor中文化以及FCKeditor ASP版上傳程式的作者）及時提醒了我，做法是去修改FCK上傳程式，在裡面進行許可權判斷，並且再在fckconfig.js裡把相應的一些功能去掉。但隨之FCK版本的不斷升級，每升一次都要去改一次配置程式fckconfig.js，我發覺厭煩了，就沒什麼辦法能更好的控制這種配置麼？事實上，是有的。
在fckconfig.js裡面，有