Feedback

#1樓 [樓主]   回復  引用  查看    

2007-08-22 15:45 by 春風依舊      

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中的內容數據了?？梢栽趕truts/jsf中使用。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
由于給FCKeditor瘦身，所以常會報缺少對象支持等錯誤，只要在FCKeditor/editor/lang中加上相應的js語言文件即 可。如果加載頁面失?。‵CKeditor未定義）還有一個可能就是引用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中控件的功能，實現(xiàn)功能裁剪：
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的上傳和瀏覽服務器功能，以及如何在里面實現(xiàn)動態(tài)
超連接，轉發(fā)到servlet經過filter以后去調用服務器的action
如何實現(xiàn)對應用戶瀏覽自己的圖片的列表實現(xiàn)！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FCKeditor集成java servlet可以實現(xiàn)文件的上傳和服務器端列表讀取功能FCKeditor自己提供了兩個servlet來分別實現(xiàn)上傳文件功能，和讀取服務器端文件列表功能，這兩個servlet分別為：
com.fredck.FCKeditor.connector.ConnectorServlet（讀取文件列表）
com.fredck.FCKeditor.uploader.SimpleUploaderServlet（實現(xiàn)文件上傳）
1.瀏覽服務器端文件列表
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
web.xml文件中，比如：ConnectorServlet中的配置選項：
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
意思是在瀏覽服務器上的baseDir配置指定里面的所有文件及其目錄結構列表。
如果你的baseDir沒有配置，Connector將會自動創(chuàng)建一個默認的文件夾
UserFiles，對應的ConnectorServlet中init()方法中代碼如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
baseDir = getInitParameter(”baseDir”);
if (baseDir == null)
baseDir = “/UserFiles/”;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
還想說一下的是，F(xiàn)CKeditor的client調用server的servlet方法采用的是Ajax思想來實現(xiàn)。當你點擊瀏覽服務器 (browser server)的時候就會觸發(fā)一個異步的javascrīpt + xmlhttp的調用響應，后臺的servlet會去完成你要請求的事件，然后數據以xml方式返回給client來解析。很明顯，你要實現(xiàn)去數據庫或者 其他的文件系統(tǒng)請求列表，你只要修改
ConnectorServlet中兩個私有方法：getFolders 和 getFiles
讓它去你指定的地方得到文件列表即可，這樣你的文件可以放在任何你指定目錄下。多說一句，很多人都想知道個人blog系統(tǒng)中怎么實現(xiàn)上傳文件以后 對應用戶瀏覽自己的列表的，我的做法很簡單，建立你用戶名的文件夾，你上傳只能上傳到你的目錄夾，瀏覽可以通過程序指定瀏覽對應用戶下的文件夾即可，這個 時候你要修改Connectorservlet中的路徑即可！
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2.超連接重定位問題
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor可以插入超連接，實現(xiàn)對文件的預覽功能，只要我們稍微改變我們可以使FCKeditor編輯器支持對任意文件系統(tǒng)下的任意文件 的客戶端瀏覽和下載保存！FCKeditor本來提供的是相對URL超鏈接，只要我們修改ConnectorServlet中傳遞給客戶端的地址的時候， 把它改寫成絕對URL然后再通過我們自己的filter的servlet實現(xiàn)重定向去一個下載/瀏覽文件的struts的action方法就可以實現(xiàn)在客 戶端對超連接文件的下載和瀏覽！說一下具體做法吧：
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實現(xiàn)對超連接的重定位就提取URL中的這個配置參數來判斷，配置如下：
<init-param>
<param-name>resourcePath</param-name>
<param-value>/fileSystem/</param-value>
</init-param>
2)：建立你的filter servlet，實現(xiàn)對URL的截獲，對符合要求的URL進行重定位到你的對應action中去即可
3)：實現(xiàn)你的對應action來實現(xiàn)文件的上傳和下載功能即可！
4)：擴展功能－實現(xiàn)對URL的加密，對連接的URL中加上一串字符，最后幾位作為算法校驗，對不符合要求的URL連接,filter將會拒絕重 定位到指定action。此外利用自己寫的擴展類還可以實現(xiàn)對超連接的文件類型進行限制，比如你只能超連接JPG|GIF|DOC|TXT|HTML等幾 種后綴名的文件，對其他文件即使你指定超連接也讓你瀏覽和下載，這些都可以在web.xml中通過修改對應servlet的配置文件的初始化參數實現(xiàn)。
3.頁面javascrīpt修改
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
瀏覽服務器的功能對應的html/javascrīpt相關的文件為：browser.html和frmresourcelist.html對應 你想傳遞的信息你可以append在文件名的字符串后面，在GetFileRowHtml（）的javascrīpt函數中實現(xiàn)對文件名的截取，這樣 client只會顯示文件名，而你可以得到文件的數據庫唯一標識，任何你想要的信息你都可以通過修改ConnectorServlet中的私有方法 getFiles()來實現(xiàn)，只要修改頁面frmresurcelist.html中的GetFileRowHtml（）中傳入變量fileName即 可。你還可以在點擊選中文件的時候實現(xiàn)一個你自己的Ajax調用，一切取決你的項目需要！
4.我不是一個javascrīpt高手，其實如果我對javascrīpt了解多一些也許對客戶端的代碼修改以后做出更眩的功能?？梢愿玫耐瓿蓪CKeditor裁剪。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
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，要么自定義一下功能，要么就用系統(tǒng)已經定義好的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'];
這也是改過的把鼠標右鍵的“鏈接、圖像，F(xiàn)LASH，圖像按鈕”功能都去掉。
找到：
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”按鈕后才打開編輯器界面。
實現(xiàn)原理：
使用JAVASCRIPT版的FCK，在頁面加載時（未打開FCK），創(chuàng)建一個隱藏的TextArea域，這個TextArea
的name和ID要和創(chuàng)建的FCK實例名稱一致，然后點擊”O(jiān)pen Editor”按鈕時，通過調用一段函數，使用
FCK的ReplaceTextarea()方法來創(chuàng)建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實現(xiàn)很多想要定制的功能，比如最基本的數據驗證，如何在提交的時候用JS判斷當前編輯器區(qū)域內是否有內容，F(xiàn)CK的API提供了GetLength()方法；
再比如如何通過腳本向FCK里插入內容，使用InsertHTML()等；
還有，在用戶定制功能時，中間步驟可能要執(zhí)行FCK的一些內嵌操作，那就用ExecuteCommand()方法。
詳細的API列表，請查看FCKeditor的Wiki。而常用的API，請查看FCK壓縮包里的_samples/html/sample08.html。此處就不貼代碼了。
3、外聯(lián)編輯條（多個編輯域共用一個編輯條）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
這個功能是2.3版本才開始提供的，以前版本的FCKeditor要在同一個頁面里用多個編輯器的話，得一個個創(chuàng)建，現(xiàn)在有了這個外聯(lián)功能，就不用那么麻煩了，只需要把工具條放在一個適當的位置，后面就可以無限制的創(chuàng)建編輯域了。
要實現(xiàn)這種功能呢，需要先在頁面中定義一個工具條的容器：<div id=”xToolbar”></div>，然后再根據這個容器的id屬性進行設置。
JAVASCRIPT實現(xiàn)代碼：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<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時，我就出現(xiàn)過這個問題，還好NetRube（FCKeditor中文化以及FCKeditor ASP版上傳程序的作者）及時提醒了我，做法是去修改FCK上傳程序，在里面進行權限判斷，并且再在fckconfig.js里把相應的一些功能去掉。但 隨之FCK版本的不斷升級，每升一次都要去改一次配置程序fckconfig.js，我發(fā)覺厭煩了，就沒什么辦法能更好的控制這種配置么？事實上，是有 的。
在fckconfig.js里面，有關于是否打開上傳和瀏覽服務器的設置，在創(chuàng)建FCKeditor時，通過程序來判斷是否創(chuàng)建有上傳瀏覽功能的編輯器。首先，我先在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 即可使按鈕旁邊出現(xiàn)文字，注意沒有引號。
例如：
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 實戰(zhàn)技巧 - 1 》 編輯帖子” 應用該樣式 則原來文字就會變成<span class=”Title”>經典論壇 》 前臺制作與腳本專欄 》 FCKeditor 實戰(zhàn)技巧 - 1 》 編輯帖子</span>
注意：如果編輯器呈整頁編輯狀態(tài)，那么整頁里面也需要插入樣式表鏈接才能顯示出來樣式。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
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 編輯器內容是否發(fā)生變化：
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();
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－