FCKeditor線上編輯器--使用方法
FCKeditor線上編輯器
今天用了FCKeditor線上編輯器,感覺比eWebSoft線上文字編輯器飛魚修改版好用!
下面這個連結可以檢視使用手冊:
http://www.phpchina.com/51068/viewspace_22098.html
以下為摘抄網友部落格文章:http://blog.csdn.net/yanglu_168/archive/2008/04/19/2306701.aspx
首先,FCKEDITOR的效能是非常好的,使用者只需很少的時間就可以載入FCKEDITOR所需檔案.對於其他線上編輯器來說,這幾乎是個很難解決的難題,因為在開啟編輯器時需要裝載太多的檔案.比如CUTEEDITOR,雖然功能比FCKEDITOR還要強大,可是,它本身也夠龐大了,至於FREETEXTBOX等,其易用性與FCKEDITOR相比,尚有差距,可以說,FCKEDITOR是一個別具匠心的線上編輯器,它裡面融入了作者高深的面向物件的JAVASCRIPT功力,集易用性與強大的功能與一體.
.與編輯器相關的所有影象,指令碼以及呼叫頁
.語言檔案
.編輯器的面板檔案
.工具樣的貼圖等
這些將導致在伺服器和客戶端間產生相當的流量.如果有許多檔案被呼叫,那麼即便每個檔案很小.也會讓使用者等得不耐煩.
在2.0版中,開發人員有兩種方法來解決這個問題.
那就是指定裝載順序和指令碼壓縮
裝載順序
從2.0版開始,編輯器按以下步驟裝載資源:
.基本頁(就是編輯器所在頁)以及裝入編輯器的JS指令碼
.用來建立編輯器的指令碼
.編輯器的語言和面板.
.建立編輯器.
.載入預置的編輯文件內容.
.從現在開始,使用者可以閱讀和編輯文件了,不過,拖拽支援以及工具欄都是不可用的
.載入編輯器引擎指令碼
.建立工具欄,並且可用
.從現在開始,編輯器的所有功能都已經完整
.載入工具欄圖示
指令碼壓縮
在打包任何新版本時,編輯器的JS指令碼將會進行預處理.預處理步驟如下:
.移除所有程式碼註釋
.移除所有無用的空白字元.
.將指令碼合併成幾個檔案
使用上面的方法,我們可以將指令碼檔案的大小壓縮到原來的50%.
壓縮後,原始的程式碼仍然存在於一個名為_Source的資料夾中
如何打包?
編輯器已經自帶了打包程式,它位於FCKEDITOR的根資料夾中_PACKAGER資料夾中,名為Fckeditor.Packager.exe,將其複製到FCKEDITOR根資料夾中並執行,即可自動將JS指令碼打包並壓縮
需要注意的是該程式是一個.NET程式,必須安裝.NET FRAMEWORK才能使用
想要獲取支援?
如果你捐贈15000歐元,你就可以獲得1年的免費技術支援(比較貴的說,相當於人民幣15萬,不過西歐的費用相當驚人)
如何安裝?
1.下載最新版的FCKEDITOR
2.解壓縮到你的站點根資料夾中名為FCKEDITOR的資料夾中(名稱必須為FCKEDITOR,因為配置檔案中已經使用此名稱來標示出FCKEDITOR的位置)
3.現在,編輯器就可以使用了,如果想要檢視演示,可以按下面方法訪問:
http://<your-site>/FCKeditor/_samples/default.html
注意:你可以將FCKEDITOR放置到任何資料夾,預設情況下,將其放入到FCKEDITOR資料夾是最為簡單的方法.如果你放入的資料夾使用別的名稱,請修改配置資料夾中編輯器BasePath引數,如下所示:
oFckeditor.BasePath="/Components/fckeditor/";
另外,FCKEDITOR資料夾中所有以下劃線開頭的資料夾及檔案,都是可選的,可以安全的從你的釋出中刪除.它們並不是編輯器執行時必需的
如何將FCKEDITOR整合進我的頁面?
由於目前的版本提供的FCKEDITOR僅提供了JAVASCRIPT式的整合,因此,這裡僅講述如何應用JAVASCRIPT來整合FCKEDITOR到站點中,當然,其他各種語言的整合,你可以參考_samples資料夾中的例子來完成
1,假如編輯器已經安裝在你的站點的/FCKEDITOR/資料夾下.那麼,第一步我們需要做的就是在頁面的HEAD段中放入SCRIPT標記以引入JAVASCRIPT整合模組.例如:
<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
其中路徑是可更改的
2,現在,FCKEDITOR類已經可以使用了.有兩個方法在頁面中建立一個FCKEDITOR編輯器:
方法1:內聯方式(建議使用):在頁面的FORM標記內需要插入編輯器的地方置入以下程式碼:
script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Create() ;
</script>
方法2:TEXTAREA標記替換法(不建議使用):在頁面的ONLOAD事件中,新增以下程式碼以替換一個已經存在的TEXTAREA標記
<html>
<head>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>
3.現在,編輯器可以使用了
FCKEDITOR類參考:
下面是用來在頁面中建立編輯器的FCKEDITOR類的說明
構造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:編輯器的唯一名稱(相當於ID)
WIDTH:寬度
HEIGHT:高度
toolbarSet:工具條集合的名稱
value:編輯器初始化內容
屬性:
instanceName:編輯器例項名
width:寬度,預設值為100%
height:高度,預設值是200
ToolbarSet:工具集名稱,參考FCKCONFIG.JS,預設值是Default
value:初始化編輯器的HTML程式碼,預設值為空
BasePath:編輯器的基路徑,預設為/Fckeditor/資料夾,注意,儘量不要使用相對路徑.最好能用相對於站點根路徑的表示方法,要以/結尾
CheckBrowser:是否在顯示編輯器前檢查瀏覽器相容性,預設為true
DisplayErrors:是否顯示提示錯誤,默為true;
集合:
Config[Key]=value;
這個集合用於更改配置中某一項的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";
方法:
Create()
建立並輸出編輯器
RepaceTextArea(TextAreaName)
用編輯器來替換對應的文字框
如何配置FCKEDITOR?
FCKEDITOR提供了一套用於定製其外觀,特性及行為的設定集.主配置檔名為Fckconfig.js
你既可以編輯主配置檔案,也可以自己定義單獨的配置檔案.配置檔案使用JAVASCRIPT語法.
修改後,在建立編輯器時,可以使用以下語法:
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;
oFCKeditor.Create() ;
提醒:當你修改配置後,請清空瀏覽器快取以檢視效果
配置選項:
AutoDetectLanguage=true/false 自動檢測語言
Basehref="" _fcksavedurl="""" 相對連結的基地址
ContentLangDirection="ltr/rtl" 預設文字方向
ContextMenu=字串陣列,右鍵選單的內容
CustomConfigurationsPath="" 自定義配置檔案路徑和名稱
Debug=true/false 是否開啟除錯功能,這樣,當呼叫FCKDebug.Output()時,會在除錯窗中輸出內容
DefaultLanguage="" 預設語言
EditorAreaCss="" 編輯區的樣式表文件
EnableSourceXHTML=true/false 為TRUE時,當由視覺化介面切換到內碼表時,把HTML處理成XHTML
EnableXHTML=true/false 是否允許使用XHTML取代HTML
FillEmptyBlocks=true/false 使用這個功能,可以將空的塊級元素用空格來替代
FontColors="" 設定顯示顏色拾取器時文字顏色列表
FontFormats="" 設定顯示在文字格式列表中的命名
FontNames="" 字型列表中的字型名
FontSizes="" 字型大小中的字號列表
ForcePasteAsPlainText=true/false 強制貼上為純文字
ForceSimpleAmpersand=true/false 是否不把&符號轉換為XML實體
FormatIndentator="" 當在原始碼格式下縮排程式碼使用的字元
FormatOutput=true/false 當輸出內容時是否自動格式化程式碼
FormatSource=true/false 在切換到程式碼檢視時是否自動格式化程式碼
FullPage=true/false 是否允許編輯整個HTML檔案,還是僅允許編輯BODY間的內容
GeckoUseSPAN=true/false 是否允許SPAN標記代替B,I,U標記
IeSpellDownloadUrl=""下載拼寫檢查器的網址
ImageBrowser=true/false 是否允許瀏覽伺服器功能
ImageBrowserURL="" 瀏覽伺服器時執行的URL
ImageBrowserWindowHeight="" 影象瀏覽器視窗高度
ImageBrowserWindowWidth="" 影象瀏覽器視窗寬度
LinkBrowser=true/false 是否允許在插入連結時瀏覽伺服器
LinkBrowserURL="" 插入連結時瀏覽伺服器的URL
LinkBrowserWindowHeight=""連結目標瀏覽器視窗高度
LinkBrowserWindowWidth=""連結目標瀏覽器視窗寬度
Plugins=object 註冊外掛
PluginsPath="" 外掛資料夾
ShowBorders=true/false 合併邊框
SkinPath="" 面板資料夾位置
SmileyColumns=12 圖符窗列數
SmileyImages=字元陣列 圖符窗中圖片檔名陣列
SmileyPath="" 圖符資料夾路徑
SmileyWindowHeight 圖符視窗高度
SmileyWindowWidth 圖符視窗寬度
SpellChecker="ieSpell/Spellerpages" 設定拼寫檢查器
StartupFocus=true/false 開啟時FOCUS到編輯器
StylesXmlPath="" 設定定義CSS樣式列表的XML檔案的位置
TabSpaces=4 TAB鍵產生的空格字元數
ToolBarCanCollapse=true/false 是否允許展開/摺疊工具欄
ToolbarSets=object 允許使用TOOLBAR集合
ToolbarStartExpanded=true/false 開啟是TOOLBAR是否展開
UseBROnCarriageReturn=true/false 當回車時是產生BR標記還是P或者DIV標記
如何自定義樣式列表呢?
FCKEDITOR的樣式工具欄中提供了預定義的樣式,樣式是通過XML檔案定義的,預設的XML樣式檔案存在於FCkEditor根資料夾下的FckStyls.xml檔案中
這個XML檔案的結構分析如下:
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>
每一個STYLE標記定義一種樣式,NAME是顯示在下拉列表中的樣式名,ELEMENT屬性指定此樣式所適用的物件,因為FCKEDITOR中的樣式是上下文敏感的,也就是說,選擇不同的物件,僅會顯示針對這類物件定義的樣式
拼寫檢查
FCKEDITOR帶了兩種拼寫檢查工具,一種是ieSpell,預設情況下使用這種,使用這種方式的拼寫檢查,要求客戶下載並安裝iespell這個小軟體,另外,也提供SpellPager的方式來進行拼寫檢查,不過,由於SPELLPAGER是由PHP編寫的伺服器端指令碼,因此,要求你的WEB伺服器必須支援PHP指令碼語言方可
更改拼寫檢查器的方式請參見有關配置檔案的詳細說明
壓縮指令碼
為了提供指令碼載入的效率,FCKEDITOR採用以下方法對指令碼儘量壓縮以減少指令碼尺寸:
1,移除掉指令碼中的註釋
2.移除掉指令碼中所有無意義的空白
另外,FCKEDITOR還提供了一個專門用於壓縮指令碼的工具以便 你在釋出時能減小檔案尺寸,
你可以將_Packager資料夾中的Fckeditor.Packager.exe複製到FCKEDITOR根資料夾來執行並壓縮指令碼
本地化FCKEDITOR
如果FCKEDITOR沒有提供您所需要的語言(實際上全有了),你也可以自行製作新的語言
,你只需要複製出EN.JS,然後在其基礎上進行翻譯.另外,語言名稱與對應的指令碼檔名必須遵循RFC 3066標準,但是,需要小寫,例如:Portuguess Language對應的指令碼檔名必須為pt.js
如果需要針對某個國家的某種語系,則可以在語系縮寫後加上橫線及國家縮寫即可
在使用時,系統會自動偵測客戶端語系及國別而運用適當的介面語言.
當建立一種新的語言後,你必須在"Edit/lang/fcklanguagemanager.js"中為其建立一個條目,如下所示:
FCKLanguageManager.AvailableLanguages =
{
en : 'English',
pt : 'Portuguese'
}
需要提醒的是,檔案必須儲存為UTF-8格式
如何與伺服器端指令碼進行互動?
請檢視例子以得到相關內容
另外,在ASP.NET中以以下步驟使用
1.把FCKEDITOR添中到工具箱
2.託拽FCKEDITOR控制元件到頁面
3.為其指定名稱
4.FCKEDITOR類的所有屬性不光可以在程式碼中使用,而且可以作為FCKEDITOR控制元件的屬性直接使用,例如,要改變面板,可以在UI頁面中指定SkinPath="/fckeditor/editor/skins/office2003"即可,其實FCKEDITOR的ASP.NET版本可以做得更好,你可以找到FCKEDITOR ASP.NET 2.1的原始檔,然後修改該控制元件的設計,為其暴露更多有用的屬性,重新編譯即可
5,POSTBACK後的資料,使用FCKEDITOR控制元件的value屬性獲得
6.由於預設狀態下,ASP.NET不允許提交含有HTML及JAVASCRIPT的內容,因此,你必須將使用FCKEDITOR的頁面的ValidateRequest設為false.(<%@page validteRequest="false" %>即可)
--------------------------------------------------------
附：
一、如何設定上傳檔案語言
把FCKeditor根目錄下面的fckconfig.js檔案裡
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
這兩行中改成您所需要呼叫的編輯器語言，如用asp.net則改為aspx；
二、解決中文的問題:
在web.config中加入:
<globalization requestEncoding="GB2312" responseEncoding="GB2312"/>
這樣設定後可以顯示中文的檔案，但URL地址也是中文的；
如果伺服器對中文地址的解析不好，可能導致圖片無法瀏覽；
所以修改：editor\filemanager\browser\default\frmresourceslist.html
中的OpenFile函式，把
window.top.opener.SetUrl( fileUrl ) ;
修改為:
window.top.opener.SetUrl( escape(fileUrl) ) ;
三.設定上傳的目錄：
1:在web.config中設定:
<appSettings>
<add key="FCKeditor:UserFilesPath" value="/fck/UpLoad/" />
</appSettings>
2:在Session中設定:
在editor\filemanager\browser\default\connectors\aspx\connector.aspx中加入以下程式碼:
<script runat="server" language="C#">
protected override void OnInit(EventArgs e)
{
Session["FCKeditor:UserFilesPath"] = "/fck/UpLoad1/";
}
</script>
附：如何在asp.net中動態設定上傳圖片的路徑？
1.在javascript中修改FCKConfig.ImageBrowserURL的值，修改方式如下：
FCKConfig.ImageBrowserURL += "?Path=要上傳的檔案路徑";
如:要把檔案上傳到站點根目錄的UploadFile資料夾中，則設定為：
FCKConfig.ImageBrowserURL += "?Path=/UploadFile";
2.在"editor\filemanager\browser\default\connectors\aspx\connector.aspx"檔案最後中增加以下程式：
<script runat="server" language="C#">
protected override void OnInit(EventArgs e)
{
if( Request.QueryString["Path"]==null ){
Session["FCKeditor:UserFilesPath"] = "/UpLoadFiles/"; //設定預設值
}else{
Session["FCKeditor:UserFilesPath"] = Request.QueryString["Path"];
}
}
</script>
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’,'-’,/*’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();
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－