javascritp對fckeditor編輯器賦值取值

javascript調用方式：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>

<textarea name="content" cols="80" rows="4">
</textarea>
<script type="text/javascript">
var FCKeditor = new FCKeditor("content");
FCKeditor.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.如果你是使用javascript來調用加載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)的時候就會觸發一個異步的javascript + xmlhttp的調用響應，後臺的servlet會去完成你要請求的事件，然後數據以xml方式返回給client來解析。很明顯，你要實現去數據庫或者其他的文件系統請求列表，你只要修改
ConnectorServlet中兩個私有方法：getFolders 和 getFiles

讓它去你指定的地方得到文件列表即可，這樣你的文件可以放在任何你指定目錄下。多說一句，很多人都想知道個人blog系統中怎麼實現上傳文件以後對應用戶瀏覽自己的列表的，我的做法很簡單，建立你用戶名的文件夾，你上傳只能上傳到你的目錄夾，瀏覽可以通過程序指定瀏覽對應用戶下的文件夾即可，這個時候你要修改Connectorservlet中的路徑即可！
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

2.超連接重定位問題
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor可以插入超連接，實現對文件的預覽功能，只要我們稍微改變我們可以使FCKeditor編輯器支持對任意文件系統下的任意文件的客戶端瀏覽和下載保存！FCKeditor本來提供的是相對URL超鏈接，只要我們修改ConnectorServlet中傳遞給客戶端的地址的時候，把它改寫成絕對URL然後再通過我們自己的filter的servlet實現重定向去一個下載/瀏覽文件的struts的action方法就可以實現在客戶端對超連接文件的下載和瀏覽！說一下具體做法吧：

1)：修改ConnectorServlet傳遞給客戶端javascript的路徑，代碼如下：
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.頁面javascript修改
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
瀏覽服務器的功能對應的html/javascript相關的文件爲：browser.html和frmresourcelist.html對應你想傳遞的信息你可以append在文件名的字符串後面，在GetFileRowHtml()的javascript函數中實現對文件名的截取，這樣client只會顯示文件名，而你可以得到文件的數據庫唯一標識，任何你想要的信息你都可以通過修改ConnectorServlet中的私有方法getFiles()來實現，只要修改頁面frmresurcelist.html中的GetFileRowHtml()中傳入變量fileName即可。你還可以在點擊選中文件的時候實現一個你自己的Ajax調用，一切取決你的項目需要！

4.我不是一個javascript高手，其實如果我對javascript瞭解多一些也許對客戶端的代碼修改以後做出更眩的功能。可以更好的完成對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','-',/*'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';

添加文件 /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裏面，有關於是否打開上傳和瀏覽服務器的設置，在創建FCKeditor時，通過程序來判斷是否創建有上傳瀏覽功能的編輯器。首先，我先在fckconfig.js裏面把所有的上傳和瀏覽設置全設爲false，接着我使用的代碼如下：

JAVASCRIPT版本：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script type="text/javascript">
    var FCKeditor = new FCKeditor( 'fbContent' );
    <% if power = powercode then %>
    oFCKeditor.Config['LinkBrowser'] = true;
    oFCKeditor.Config['ImageBrowser'] = true;
    oFCKeditor.Config['FlashBrowser'] = true;
    oFCKeditor.Config['LinkUpload'] = true;
    oFCKeditor.Config['ImageUpload'] = true;
    oFCKeditor.Config['FlashUpload'] = true;
    <% end if %>
    oFCKeditor.ToolbarSet = 'Basic';
    oFCKeditor.Width = '100%';
    oFCKeditor.Height = '200';
    oFCKeditor.Value = '';
    oFCKeditor.Create();
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

在按鈕旁邊加文字
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
打開 editor/js/ 兩個js文件
fckeditorcode_gecko.js
fckeditorcode_ie.js

第一個是支持非ie瀏覽器的
第二個文件是支持ie瀏覽器的

搜索 FCKToolbarButton，可以看到許多類似這樣的語句：
case 'Save':B = new FCKToolbarButton('Save', FCKLang.Save, null, null, true, null, 3); break;

'Save'是按鈕英文名字
FCKToolbarButton 的四個參數分別是：
按鈕命令名稱，按鈕標籤文字，按鈕工具提示，按鈕樣式，按鈕是否在源代碼模式可見，按鈕下拉菜單其中將第4項參數設置爲 FCK_TOOLBARITEM_ICONTEXT 即可使按鈕旁邊出現文字，注意沒有引號。
例如：
case 'Preview':B = new FCKToolbarButton('Preview', FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
這樣我們就可以將 我們經常用的3種模式源代碼、預覽、全屏編輯按鈕都加上文字了。

解釋fck樣式的工作原理
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
fck的樣式設置涉及到了兩個文件，一個是你定義好的樣式表文件.css，另一個是告訴fck樣式表如何使用的xml文件，兩個文件確一不可。
css文件的位置是不做要求的，但是需要你在應用的編輯器的頁面上插入樣式表文件的鏈接。這樣才能顯示出來樣式。
fckstyles.xml 在與editor目錄同級的目錄下。該文件定義了那些樣式可以使用在那些標籤裏面。

這就是fck自帶的樣式xml定義：
<?xml version="1.0" encoding="utf-8" ?>
<Styles>
  <Style name="Image on Left" element="img">
    <Attribute name="style" value="padding: 5px; margin-right: 5px" />
    <Attribute name="border" value="2" />
    <Attribute name="align" value="left" />
  </Style>
  <Style name="Image on Right" element="img">
    <Attribute name="style" value="padding: 5px; margin-left: 5px" />
    <Attribute name="border" value="2" />
    <Attribute name="align" value="right" />
  </Style>
  <Style name="Custom Bold" element="span">
    <Attribute name="style" value="font-weight: bold;" />
  </Style>
  <Style name="Custom Italic" element="em" />
  <Style name="Title" element="span">
    <Attribute name="class" value="Title" />
  </Style>
  <Style name="Code" element="span">
    <Attribute name="class" value="Code" />
  </Style>
  <Style name="Title H3" element="h3" />
  <Style name="Custom Ruler" element="hr">
    <Attribute name="size" value="1" />
    <Attribute name="color" value="#ff0000" />
  </Style>
</Styles>

每一個<style>將來會生成一個樣式的菜單項。name名稱就是顯示在菜單裏的文字；element定義了該樣式可以應用在那種html標籤上，<Attribute>的 name 指定了將會修改標籤的哪個屬性來應用樣式，value則是修改成的值。
看這個：
<Style name="Title" element="span">
  <Attribute name="class" value="Title" />
</Style>

如果你在fck選定了文字 "經典論壇 > 前臺製作與腳本專欄 > FCKeditor 實戰技巧 - 1 > 編輯帖子" 應用該樣式 則原來文字就會變成<span class="Title">經典論壇 > 前臺製作與腳本專欄 > FCKeditor 實戰技巧 - 1 > 編輯帖子</span>

注意：如果編輯器呈整頁編輯狀態，那麼整頁裏面也需要插入樣式錶鏈接才能顯示出來樣式。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

FCKeditor Javascript API（翻譯整理）
原文地址：http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCK 編輯器加載後，將會註冊一個全局的 FCKeditorAPI 對象。

FCKeditorAPI 對象在頁面加載期間是無效的，直到頁面加載完成。如果需要交互式地知道 FCK 編輯器已經加載完成，可使用"FCKeditor_OnComplete"函數。
<script type="text/javascript">
function FCKeditor_OnComplete(editorInstance) {
  FCKeditorAPI.GetInstance('FCKeditor1').Commands.GetCommand('FitWindow').Execute();
}
</script>

在當前頁獲得 FCK 編輯器實例：
var Editor = FCKeditorAPI.GetInstance('InstanceName');

從 FCK 編輯器的彈出窗口中獲得 FCK 編輯器實例：
var Editor = window.parent.InnerDialogLoaded().FCK;

從框架頁面的子框架中獲得其它子框架的 FCK 編輯器實例：
var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

從頁面彈出窗口中獲得父窗口的 FCK 編輯器實例：
var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

獲得 FCK 編輯器的內容：
oEditor.GetXHTML(formatted); // formatted 爲：true|false，表示是否按HTML格式取出
也可用：
oEditor.GetXHTML();

設置 FCK 編輯器的內容：
oEditor.SetHTML("content", false); // 第二個參數爲：true|false，是否以所見即所得方式設置其內容。此方法常用於"設置初始值"或"表單重置"哦作。

插入內容到 FCK 編輯器：
oEditor.InsertHtml("html"); // "html"爲HTML文本

檢查 FCK 編輯器內容是否發生變化：
oEditor.IsDirty();

在 FCK 編輯器之外調用 FCK 編輯器工具條命令：
命令列表如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
使用方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
oEditor.Commands.GetCommand('FitWindow').Execute();