最強(qiáng)悍的FckEditor下載安裝配置使用全攻略中文教程

Long_way 2007-09-13

展開全文

FckEditor配置手冊中文教程詳細(xì)說明

性能
首先,FCKEDITOR的性能是非常好的,用戶只需很少的時間就可以載入FCKEDITOR所需文件.對于其他在線編輯器來說,這幾乎是個很難解決的難題,因為在開啟編輯器時需要裝載太多的文件.比如CUTEEDITOR,雖然功能比FCKEDITOR還要強(qiáng)大,可是,它本身也夠龐大了,至于FREETEXTBOX等,其易用性與FCKEDITOR相比,尚有差距,可以說,FCKEDITOR是一個別具匠心的在線編輯器,它里面融入了作者高深的面向?qū)ο蟮腏AVASCRIPT功力,集易用性與強(qiáng)大的功能與一體.

.與編輯器相關(guān)的所有圖像,腳本以及調(diào)用頁
.語言文件
.編輯器的皮膚文件
.工具樣的貼圖等
這些將導(dǎo)致在服務(wù)器和客戶端間產(chǎn)生相當(dāng)?shù)牧髁?如果有許多文件被調(diào)用,那么即便每個文件很小.也會讓用戶等得不耐煩.
裝載順序
從2.0版開始,編輯器按以下步驟裝載資源:
.基本頁(就是編輯器所在頁)以及裝入編輯器的JS腳本
.用來建立編輯器的腳本
.編輯器的語言和皮膚.
.建立編輯器.
.載入預(yù)置的編輯文檔內(nèi)容.
.從現(xiàn)在開始,用戶可以閱讀和編輯文檔了,不過,拖拽支持以及工具欄都是不可用的
.載入編輯器引擎腳本
.建立工具欄,并且可用
.從現(xiàn)在開始,編輯器的所有功能都已經(jīng)完整
.載入工具欄圖標(biāo)

腳本壓縮
在打包任何新版本時,編輯器的JS腳本將會進(jìn)行預(yù)處理.預(yù)處理步驟如下:
.移除所有代碼注釋
.移除所有無用的空白字符.
.將腳本合并成幾個文件
使用上面的方法,我們可以將腳本文件的大小壓縮到原來的50%.
壓縮后,原始的代碼仍然存在于一個名為_Source的文件夾中

如何打包?
編輯器已經(jīng)自帶了打包程序,它位于FCKEDITOR的根文件夾中_PACKAGER文件夾中,名為Fckeditor.Packager.exe,將其復(fù)制到FCKEDITOR根文件夾中并運行,即可自動將JS腳本打包并壓縮
需要注意的是該程序是一個.NET程序,必須安裝.NET FRAMEWORK才能使用

想要獲取支持?
如果你捐贈15000歐元,你就可以獲得1年的免費技術(shù)支持(比較貴的說,相當(dāng)于人民幣15萬,不過西歐的費用相當(dāng)驚人)

如何安裝?
1.下載最新版的FCKEDITOR
2.解壓縮到你的站點根文件夾中名為FCKEDITOR的文件夾中(名稱必須為FCKEDITOR,因為配置文件中已經(jīng)使用此名稱來標(biāo)示出FCKEDITOR的位置)
3.現(xiàn)在,編輯器就可以使用了,如果想要查看演示,可以按下面方法訪問:
http://<your-site>/FCKeditor/_samples/default.html
注意:你可以將FCKEDITOR放置到任何文件夾,默認(rèn)情況下,將其放入到FCKEDITOR文件夾是最為簡單的方法.如果你放入的文件夾使用別的名稱,請修改配置文件夾中編輯器BasePath參數(shù),如下所示:
oFckeditor.BasePath="/Components/fckeditor/";
另外,FCKEDITOR文件夾中所有以下劃線開頭的文件夾及文件,都是可選的,可以安全的從你的發(fā)布中刪除.它們并不是編輯器運行時必需的

如何將FCKEDITOR整合進(jìn)我的頁面?
由于目前的版本提供的FCKEDITOR僅提供了JAVASCRIPT式的整合,因此,這里僅講述如何應(yīng)用JAVASCRIPT來整合FCKEDITOR到站點中,當(dāng)然,其他各種語言的整合,你可以參考_samples文件夾中的例子來完成
1,假如編輯器已經(jīng)安裝在你的站點的/FCKEDITOR/文件夾下.那么,第一步我們需要做的就是在頁面的HEAD段中放入SCRIPT標(biāo)記以引入JAVASCRIPT整合模塊.例如:
<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
其中路徑是可更改的
2,現(xiàn)在,FCKEDITOR類已經(jīng)可以使用了.有兩個方法在頁面中建立一個FCKEDITOR編輯器:
方法1:內(nèi)聯(lián)方式(建議使用):在頁面的FORM標(biāo)記內(nèi)需要插入編輯器的地方置入以下代碼:
script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Create() ;
</script>
方法2:TEXTAREA標(biāo)記替換法(不建議使用):在頁面的ONLOAD事件中,添加以下代碼以替換一個已經(jīng)存在的TEXTAREA標(biāo)記
<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.現(xiàn)在,編輯器可以使用了

FCKEDITOR類參考:
下面是用來在頁面中建立編輯器的FCKEDITOR類的說明

構(gòu)造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:編輯器的唯一名稱(相當(dāng)于ID)
WIDTH:寬度
HEIGHT:高度
toolbarSet:工具條集合的名稱
value:編輯器初始化內(nèi)容

屬性:
instanceName:編輯器實例名
width:寬度,默認(rèn)值為100%
height:高度,默認(rèn)值是200
ToolbarSet:工具集名稱,參考FCKCONFIG.JS,默認(rèn)值是Default
value:初始化編輯器的HTML代碼,默認(rèn)值為空
BasePath:編輯器的基路徑,默認(rèn)為/Fckeditor/文件夾,注意,盡量不要使用相對路徑.最好能用相對于站點根路徑的表示方法,要以/結(jié)尾
CheckBrowser:是否在顯示編輯器前檢查瀏覽器兼容性,默認(rèn)為true
DisplayErrors:是否顯示提示錯誤,默為true;

集合:
Config[Key]=value;
這個集合用于更改配置中某一項的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";

方法:
Create()
建立并輸出編輯器

RepaceTextArea(TextAreaName)
用編輯器來替換對應(yīng)的文本框

如何配置FCKEDITOR?
FCKEDITOR提供了一套用于定制其外觀,特性及行為的設(shè)置集.主配置文件名為Fckconfig.js
你既可以編輯主配置文件,也可以自己定義單獨的配置文件.配置文件使用JAVASCRIPT語法.

修改后,在建立編輯器時,可以使用以下語法:
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;
oFCKeditor.Create() ;

提醒:當(dāng)你修改配置后,請清空瀏覽器緩存以查看效果

配置選項:
AutoDetectLanguage=true/false 自動檢測語言
BaseHref="" _fcksavedurl="""" 相對鏈接的基地址
ContentLangDirection="ltr/rtl" 默認(rèn)文字方向
ContextMenu=字符串?dāng)?shù)組,右鍵菜單的內(nèi)容
CustomConfigurationsPath="" 自定義配置文件路徑和名稱
Debug=true/false 是否開啟調(diào)試功能,這樣,當(dāng)調(diào)用FCKDebug.Output()時,會在調(diào)試窗中輸出內(nèi)容
DefaultLanguage="" 缺省語言
EditorAreaCss="" 編輯區(qū)的樣式表文件
EnableSourceXHTML=true/false 為TRUE時,當(dāng)由可視化界面切換到代碼頁時,把HTML處理成XHTML
EnableXHTML=true/false 是否允許使用XHTML取代HTML
FillEmptyBlocks=true/false 使用這個功能,可以將空的塊級元素用空格來替代
FontColors="" 設(shè)置顯示顏色拾取器時文字顏色列表
FontFormats="" 設(shè)置顯示在文字格式列表中的命名
FontNames="" 字體列表中的字體名
FontSizes="" 字體大小中的字號列表
ForcePasteAsPlainText=true/false 強(qiáng)制粘貼為純文本
ForceSimpleAmpersand=true/false 是否不把&符號轉(zhuǎn)換為XML實體
FormatIndentator="" 當(dāng)在源碼格式下縮進(jìn)代碼使用的字符
FormatOutput=true/false 當(dāng)輸出內(nèi)容時是否自動格式化代碼
FormatSource=true/false 在切換到代碼視圖時是否自動格式化代碼
FullPage=true/false 是否允許編輯整個HTML文件,還是僅允許編輯BODY間的內(nèi)容
GeckoUseSPAN=true/false 是否允許SPAN標(biāo)記代替B,I,U標(biāo)記
IeSpellDownloadUrl=""下載拼寫檢查器的網(wǎng)址
ImageBrowser=true/false 是否允許瀏覽服務(wù)器功能
ImageBrowserURL="" 瀏覽服務(wù)器時運行的URL
ImageBrowserWindowHeight="" 圖像瀏覽器窗口高度
ImageBrowserWindowWidth="" 圖像瀏覽器窗口寬度
LinkBrowser=true/false 是否允許在插入鏈接時瀏覽服務(wù)器
LinkBrowserURL="" 插入鏈接時瀏覽服務(wù)器的URL
LinkBrowserWindowHeight=""鏈接目標(biāo)瀏覽器窗口高度
LinkBrowserWindowWidth=""鏈接目標(biāo)瀏覽器窗口寬度
Plugins=object 注冊插件
PluginsPath="" 插件文件夾
ShowBorders=true/false 合并邊框
SkinPath="" 皮膚文件夾位置
SmileyColumns=12 圖符窗列數(shù)
SmileyImages=字符數(shù)組圖符窗中圖片文件名數(shù)組
SmileyPath="" 圖符文件夾路徑
SmileyWindowHeight 圖符窗口高度
SmileyWindowWidth 圖符窗口寬度
SpellChecker="ieSpell/Spellerpages" 設(shè)置拼寫檢查器
StartupFocus=true/false 開啟時FOCUS到編輯器
StylesXmlPath="" 設(shè)置定義CSS樣式列表的XML文件的位置
TabSpaces=4 TAB鍵產(chǎn)生的空格字符數(shù)
ToolBarCanCollapse=true/false 是否允許展開/折疊工具欄
ToolbarSets=object 允許使用TOOLBAR集合
ToolbarStartExpanded=true/false 開啟是TOOLBAR是否展開
UseBROnCarriageReturn=true/false 當(dāng)回車時是產(chǎn)生BR標(biāo)記還是P或者DIV標(biāo)記

如何自定義樣式列表呢?
FCKEDITOR的樣式工具欄中提供了預(yù)定義的樣式,樣式是通過XML文件定義的,默認(rèn)的XML樣式文件存在于FCkEditor根文件夾下的FckStyls.xml文件中
這個XML文件的結(jié)構(gòu)分析如下:
<?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標(biāo)記定義一種樣式,NAME是顯示在下拉列表中的樣式名,ELEMENT屬性指定此樣式所適用的對象,因為FCKEDITOR中的樣式是上下文敏感的,也就是說,選擇不同的對象,僅會顯示針對這類對象定義的樣式

拼寫檢查
FCKEDITOR帶了兩種拼寫檢查工具,一種是ieSpell,默認(rèn)情況下使用這種,使用這種方式的拼寫檢查,要求客戶下載并安裝iespell這個小軟件,另外,也提供SpellPager的方式來進(jìn)行拼寫檢查,不過,由于SPELLPAGER是由PHP編寫的服務(wù)器端腳本,因此,要求你的WEB服務(wù)器必須支持PHP腳本語言方可
更改拼寫檢查器的方式請參見有關(guān)配置文件的詳細(xì)說明

壓縮腳本
為了提供腳本載入的效率,FCKEDITOR采用以下方法對腳本盡量壓縮以減少腳本尺寸:
1,移除掉腳本中的注釋
2.移除掉腳本中所有無意義的空白
另外,FCKEDITOR還提供了一個專門用于壓縮腳本的工具以便你在發(fā)布時能減小文件尺寸,
你可以將_Packager文件夾中的Fckeditor.Packager.exe復(fù)制到FCKEDITOR根文件夾來運行并壓縮腳本

本地化FCKEDITOR
如果FCKEDITOR沒有提供您所需要的語言(實際上全有了),你也可以自行制作新的語言
,你只需要復(fù)制出EN.JS,然后在其基礎(chǔ)上進(jìn)行翻譯.另外,語言名稱與對應(yīng)的腳本文件名必須遵循RFC 3066標(biāo)準(zhǔn),但是,需要小寫,例如:Portuguess Language對應(yīng)的腳本文件名必須為pt.js
如果需要針對某個國家的某種語系,則可以在語系縮寫后加上橫線及國家縮寫即可

在使用時,系統(tǒng)會自動偵測客戶端語系及國別而運用適當(dāng)?shù)慕缑嬲Z言.

當(dāng)建立一種新的語言后,你必須在"Edit/lang/fcklanguagemanager.js"中為其建立一個條目,如下所示:
FCKLanguageManager.AvailableLanguages =
{

en : 'English',
pt : 'Portuguese'
}

需要提醒的是,文件必須保存為UTF-8格式

如何與服務(wù)器端腳本進(jìn)行交互?
請查看例子以得到相關(guān)內(nèi)容

另外,在ASP.NET中以以下步驟使用
1.把FCKEDITOR添中到工具箱
2.托拽FCKEDITOR控件到頁面
3.為其指定名稱
4.FCKEDITOR類的所有屬性不光可以在代碼中使用,而且可以作為FCKEDITOR控件的屬性直接使用,例如,要改變皮膚,可以在UI頁面中指定SkinPath="/fckeditor/editor/skins/office2003"即可,其實FCKEDITOR的ASP.NET版本可以做得更好,你可以找到FCKEDITOR ASP.NET 2.1的源文件,然后修改該控件的設(shè)計,為其暴露更多有用的屬性,重新編譯即可
5,POSTBACK后的數(shù)據(jù),使用FCKEDITOR控件的value屬性獲得
6.由于默認(rèn)狀態(tài)下,ASP.NET不允許提交含有HTML及JAVASCRIPT的內(nèi)容,因此,你必須將使用FCKEDITOR的頁面的ValidateRequest設(shè)為false.(<%@page validteRequest="false" %>即可)

附：
一、如何設(shè)置上傳文件語言

二、解決中文的問題:
在web.config中加入:
<globalization requestEncoding="GB2312" responseEncoding="GB2312"/>
這樣設(shè)置后可以顯示中文的文件，但URL地址也是中文的；
如果服務(wù)器對中文地址的解析不好，可能導(dǎo)致圖片無法瀏覽；
所以修改：editor\filemanager\browser\default\frmresourceslist.html
中的OpenFile函數(shù)，把
window.top.opener.SetUrl( fileUrl ) ;
修改為:
window.top.opener.SetUrl( escape(fileUrl) ) ;

三.設(shè)置上傳的目錄：
1:在web.config中設(shè)置:
<appSettings>
<add key="FCKeditor:UserFilesPath" value="/fck/UpLoad/" />
</appSettings>

2:在Session中設(shè)置:
在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中動態(tài)設(shè)置上傳圖片的路徑？

1.在javascript中修改FCKConfig.ImageBrowserURL的值，修改方式如下：
FCKConfig.ImageBrowserURL += "?Path=要上傳的文件路徑";
如:要把文件上傳到站點根目錄的UploadFile文件夾中，則設(shè)置為：
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/"; //設(shè)置默認(rèn)值
}else{
  Session["FCKeditor:UserFilesPath"] = Request.QueryString["Path"];
}
    }
</script>

多環(huán)境下的配置和使用技巧

在fckeditor中添加右鍵菜單
現(xiàn)在網(wǎng)上介紹FCKEditor如何配置，如何精簡的例子非常之多，如有需要可以google一下，此處不必贅述?，F(xiàn)在介紹一下，如何自定義此編輯器，暫包括如何添加工具條上的item，產(chǎn)生響應(yīng)，添加右鍵菜單。IT SEEMS VERY EASY!

　　閑言少敘，書歸正傳。

　　一、自定義右鍵菜單:

　　1、首先，在editor/lang/zh-cn.js里添加你所要添加的工具條item的名字，此文件定義了一個FCKLang變量，仿照里邊的格式寫哦，如:First: "第一",注意，如果是不在倒數(shù)第二行(倒數(shù)第一行是“}”)，后邊的這個逗號是一定要有的，不然網(wǎng)頁中不會出現(xiàn)編輯器，筆者曾經(jīng)犯過如此低級的錯誤，待醒悟后，找一僻靜之所大嘴巴子招呼;呵呵，我們是中國人，自然在冒號后對應(yīng)漢語，這也是將來在網(wǎng)頁中顯示的內(nèi)容。

　　2、之后，在editor/_source/internals/fckcommands.js 里新建一個command:case 'First': oCommand = new FCKFirstCommand ( 'First', FCKLang.First); break注意那個紅色字體的FCKFirstCommand了么?這個是一個自定義的command，稍候?qū)⒂懻撍?/div>

　　3、然后，在editor/_source/internals/fckcontextmenu.js 添加一個context menu 。在case 'Generic' : 下面添加如下: oGroup.Add( new FCKContextMenuItem( this, 'First', FCKLang.First, true ) ) ; 其中第四個布爾類型的參數(shù)，如果指定為true，說明菜單有圖標(biāo)，反之則無。在此，我指明了我所自定義的菜單是有圖標(biāo)的，那么我就應(yīng)該把圖標(biāo)放在editor\skins\xxx\toolbar目錄下，其中xxx就是你在你的配置文件里選擇的編輯器的皮膚，但是我們的圖標(biāo)命名可是有學(xué)問的，必須是如FCKContextMenuItem構(gòu)造函數(shù)(且這么叫它)第二個字符串參數(shù)的小寫字母形式，如，這里我的圖標(biāo)被命名為first.gif了。 Ok，如此右鍵菜單就被添加上去了，運行你的網(wǎng)頁，看看FCKEditor是否奏效?如果不奏效的話就要重新參考此文嘍^_^。

　　4、然后，還有最關(guān)鍵的一步:用editor下的fckeditor.original.html網(wǎng)頁的內(nèi)容代替fckeditor.html的內(nèi)容，同時不要忘記備份fckeditor.html文件!

　　5、現(xiàn)在開始討論步驟2中的FCKFirstCommand。菜單添加上其了，你總得讓丫擁有什么功能吧?好，在editor/_source/commandclasses/fck_othercommands.js里新建這個類：

四大 FCKeditor 實戰(zhàn)應(yīng)用技巧

一般建立好類后，還要建立兩個靜態(tài)函數(shù):xxx .prototype.Execute，xxx .prototype.GetState。前者是事件處理函數(shù)，即點擊了該右鍵菜單所要執(zhí)行的功能全部寫在這個函數(shù)，后者返回菜單的狀態(tài)(可用?不可用?)。在此為了演示，我們實現(xiàn)一個最簡單的功能: FCKPageCommand.prototype.Execute = function(){ window.alert("It works!");}夠簡單吧，只是不疼不癢的彈出一個提示框。當(dāng)然，這里我們也可以不用自定義的FCKFirstCommand，而直接用FCKEditor定義好的command，比如FCKDialogCommand，它也定義在fck_othercommands.js里，當(dāng)然如果這樣的話，彈出的會是一個dialog。再次運行網(wǎng)頁，右擊，點擊你的自定義菜單，是否彈出提示框呢?

FCKeditor至今已經(jīng)到了2.3.1版本了，對于國內(nèi)的WEB開發(fā)者來說，也基本上都已經(jīng)“聞風(fēng)知多少”了，很多人將其融放到自己的項目中，更有很多大型的網(wǎng)站從中吃到了甜頭。今天開始，我將一點點的介紹自己在使用FCKeditor過程中總結(jié)的一些技巧，當(dāng)然這些其實是FCK本來就有的，只是很多人用FCK的時候沒發(fā)現(xiàn)而已 :P

　　1、適時打開編輯器

　　很多時候，我們在打開頁面的時候不需要直接打開編輯器，而在用到的時候才打開，這樣一來有很好的用戶體驗，另一方面可以消除FCK在加載時對頁面打開速度的影響，如圖所示

　　點擊“Open Editor"按鈕后才打開編輯器界面

　　實現(xiàn)原理：使用JAVASCRIPT版的FCK，在頁面加載時（未打開FCK），創(chuàng)建一個隱藏的TextArea域，這個TextArea的name和ID要和創(chuàng)建的FCK實例名稱一致，然后點擊"Open Editor"按鈕時，通過調(diào)用一段函數(shù)，使用FCK的ReplaceTextarea()方法來創(chuàng)建FCKeditor，代碼如下

2、使用FCKeditor 的 API

　　FCKeditor編輯器，提供了非常豐富的API，用于給End User實現(xiàn)很多想要定制的功能，比如最基本的數(shù)據(jù)驗證，如何在提交的時候用JS判斷當(dāng)前編輯器區(qū)域內(nèi)是否有內(nèi)容，F(xiàn)CK的API提供了GetLength()方法；

　　再比如如何通過腳本向FCK里插入內(nèi)容，使用InsertHTML()等；

　　還有，在用戶定制功能時，中間步驟可能要執(zhí)行FCK的一些內(nèi)嵌操作，那就用ExecuteCommand()方法。

　　詳細(xì)的API列表，請查看FCKeditor的Wiki。而常用的API，請查看FCK壓縮包里的_samples/html/sample08.html。此處就不貼代碼了。

3、外聯(lián)編輯條（多個編輯域共用一個編輯條）

　　這個功能是2.3版本才開始提供的，以前版本的FCKeditor要在同一個頁面里用多個編輯器的話，得一個個創(chuàng)建，現(xiàn)在有了這個外聯(lián)功能，就不用那么麻煩了，只需要把工具條放在一個適當(dāng)?shù)奈恢?，后面就可以無限制的創(chuàng)建編輯域了，如圖：

　　要實現(xiàn)這種功能呢，需要先在頁面中定義一個工具條的容器：<divid="xToolbar"></div>，然后再根據(jù)這個容器的id屬性進(jìn)行設(shè)置。

　　ASP實現(xiàn)代碼：　　

　　JAVASCRIPT實現(xiàn)代碼：

<div id="xToolbar"></div>
FCKeditor 1:
<script type="text/javascript">

</script>
<br />
FCKeditor 2:
<script type="text/javascript">

</script>

　　此部分的詳細(xì)DEMO請參照：
_samples/html/sample11.html
_samples/html/sample11_frame.html

4、文件管理功能、文件上傳的權(quán)限問題

　　一直以后FCKeditor的文件管理部分的安全是個值得注意，但很多人沒注意到的地方，雖然FCKeditor在各個Release版本中一直存在的一個功能就是對上傳文件類型進(jìn)行過濾，但是她沒考慮過另一個問題：到底允許誰能上傳？到底誰能瀏覽服務(wù)器文件？

　　之前剛開始用FCKeditor時，我就出現(xiàn)過這個問題，還好NetRube（FCKeditor中文化以及FCKeditor ASP版上傳程序的作者）及時提醒了我，做法是去修改FCK上傳程序，在里面進(jìn)行權(quán)限判斷，并且再在fckconfig.js里把相應(yīng)的一些功能去掉。但隨之FCK版本的不斷升級，每升一次都要去改一次配置程序fckconfig.js，我發(fā)覺厭煩了，就沒什么辦法能更好的控制這種配置么？事實上，是有的。

　　在fckconfig.js里面，有關(guān)于是否打開上傳和瀏覽服務(wù)器的設(shè)置，在創(chuàng)建FCKeditor時，通過程序來判斷是否創(chuàng)建有上傳瀏覽功能的編輯器。首先，我先在fckconfig.js里面把所有的上傳和瀏覽設(shè)置全設(shè)為false，接著我使用的代碼如下：

　　ASP版本：

<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
with oFCKeditor
.BasePath = fckPath
.Config("ToolbarLocation") = "Out:fckToolBar"
if request.cookies(site_sn)("issuper")="yes" then
.Config("LinkBrowser") = "true"
.Config("ImageBrowser") = "true"
.Config("FlashBrowser") = "true"
.Config("LinkUpload") = "true"
.Config("ImageUpload") = "true"
.Config("FlashUpload") = "true"
end if
.ToolbarSet = "Basic"
.Width = "100%"
.Height = "200"
.Value = ""
.Create "jcontent"
%>

　　JAVASCRIPT版本：

      var oFCKeditor = 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() ;

FCKPageCommand.prototype.Execute = function()
{
window.alert("It works!");
}

FCKeditor在ASP環(huán)境中配置使用

先說一下我的測試環(huán)境：XPSP2，IIS5.1，F(xiàn)CKeditor2.0

在IIS上建立一個新的站點，我直接取名為FCKeditor
在DW里建立一個相對應(yīng)的站點，測試服務(wù)器為本機(jī)，支持VBScript
下載FCKeditor2.0，這個東西是開源的，網(wǎng)上能下到的地方很多，自己找去……

下載下來的應(yīng)該是壓縮包，解壓到FCKeditor站點根目錄，什么都不需要更改，直接就可以開始調(diào)用了。等你會了的時候，會發(fā)現(xiàn)簡單得要死去！

在站點根目錄下，新建一個index.asp頁面，<body>段內(nèi)加如下代碼（調(diào)用編輯器）：

<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/FCKeditor/" //設(shè)置編輯器的路徑，我站點根目錄下的一個目錄
oFCKeditor.ToolbarSet = "Default"
oFCKeditor.Width = "100%"
oFCKeditor.Height = "600"

oFCKeditor.Value = "" //這個是給編輯器初始值
oFCKeditor.Create "logbody" //以后編輯器里的內(nèi)容都是由這個logbody取得，命名由你定

加了這一段別忘了在index.asp前面第二行加上

把fckeditor.asp包含進(jìn)來。切記切記！

就這么簡單！

現(xiàn)在你只要把這個編輯器當(dāng)成一個控件來使用，提取它的數(shù)據(jù)時用：request("logbody")

現(xiàn)在松口氣吧。測試成功了。里面有些設(shè)置，去網(wǎng)上找些高級的使用說明來看吧。

FCKeditor使用初步

作者：檸檬園主

　　FCKeditor 2.0版終于出來了，之所以用“終于”這個詞，是因為在這一版本上加上了眾望所歸的FLASH插入功能。可以說在所有的在線編輯器中，F(xiàn)CKeditor是目前互聯(lián)網(wǎng)上最好的編輯器，功能強(qiáng)大，支持多種瀏覽器，無平臺限制，可以和多種WEB語言融合，多語言支持，開源等~~

　　對于一個全新的網(wǎng)站，F(xiàn)CKeditor就可以直接拿過來用了，不需要進(jìn)行什么修改。但是對于絕大多數(shù)的已有網(wǎng)站而言，F(xiàn)CKeditor的一些設(shè)置并不適合自己的使用，這篇文章旨在告訴你簡單的修改FCKeditor以方便您的網(wǎng)站的使用。

　　第一項工作就是對這個功能宏大的編輯器進(jìn)行精簡，當(dāng)然是文件精簡而非功能精簡化。在這里我以asp版的FCKeditor為例進(jìn)行，進(jìn)入到FCKeditor 2.0文件夾下，先把以“_”為開頭的文件夾統(tǒng)統(tǒng)刪除，這些文件夾里放的是范例或是一些其它工具。其實也就是只保留editor文件夾、fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了，最外層的精簡化完畢，進(jìn)入到editor文件夾內(nèi)，先把“_source”文件夾刪除，這里是一些源文件，對于使用來說沒什么用處。

　　進(jìn)入images文件夾，刪除smiley文件夾，些文件是放表情圖標(biāo)的，由于接下來我會用我自己的表情圖標(biāo)，先把他們的刪除，當(dāng)然，如果你想用這里的表情圖標(biāo)那就不要刪掉了。退出 images再進(jìn)入lang文件夾內(nèi)，這里的東西可以來個大清洗了，只保留fcklanguagemanager.js、zh-cn.js、en.js、zh.js這四個文件，第一個文件是語言配置文件，有了它才能和fckconfig.js里的設(shè)置成對對應(yīng)上相應(yīng)的語言文件,zh-cn.js是簡體中文語言包,en.js就不用說了吧，zh.js是繁體中文的。怎么樣？一下子少了幾百K，爽吧~

　　再退出lang文件夾，進(jìn)入skin文件夾，如果你想使用fckeditor默認(rèn)的這種奶黃色，那就把除了default文件夾外的另兩個文件夾直接刪除，如果想用別的，那就自己考慮了，不過我給你個建議，如果不想用默認(rèn)的，那就選那個silver，因為銀色也就是灰色和任何顏色配起來都不會難看，而那個office2003的皮膚，反正我是非常不喜歡的，并且圖片相對也比較大，又增加了下載時間，不要！

　　精簡的最后一步，退出skin文件夾，再進(jìn)入filemanager，如果你用的不是最新版的fckeditor的話，那這里就一個文件夾browser，新版的還有一個upload文件夾。一個個來，先進(jìn)入到filemanager/browser/default/connectors/下，因為我是用的asp的，所以除asp文件夾外，全部刪除。然后再進(jìn)入filemanager/upload/下，同樣，只留asp文件夾，至此，編輯器的精簡化已經(jīng)結(jié)束了，接下來，我們對編輯器進(jìn)行設(shè)置修改。

　　第一個修改的文件，也就是fckeditor總配置文件，位于根目錄下的fckconfig.js文件。請根據(jù)下面的列表進(jìn)行（以fckeditor 2.0版的為準(zhǔn)）：

找到第20行 FCKConfig.DefaultLanguage = 'en' ;改為 FCKConfig.DefaultLanguage = 'zh-cn' ;設(shè)置默認(rèn)語言為簡體中文
找到第40行 FCKConfig.TabSpaces = 0 ; 改為FCKConfig.TabSpaces = 1 ; 即在編輯器域內(nèi)可以使用Tab鍵。

如果你的編輯器還用在網(wǎng)站前臺的話，比如說用于留言本或是日記回復(fù)時，那就不得不考慮安全了，在前臺千萬不要使用Default的toolbar，要么自定義一下功能，要么就用系統(tǒng)已經(jīng)定義好的Basic，也就是基本的toolbar，
找到第64行 FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']
] ;
這是我改過的Basic，把圖像功能去掉，把添加鏈接功能去掉，因為圖像和鏈接和flash和圖像按鈕添加功能都能讓前臺頁直接訪問和上傳文件，要是這兒不改直接給你上傳個木馬還不馬上玩完？但是光這樣還不行，fckeditor還支持編輯域內(nèi)的鼠標(biāo)右鍵功能。
找到第73行
FCKConfig.ContextMenu = ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',/*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;

這也是我改過的把鼠標(biāo)右鍵的“鏈接、圖像，F(xiàn)LASH，圖像按鈕”功能都去掉。

　　找到第77行 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' ;

　　接下來就設(shè)置上傳功能了，還是以ASP為例，其實fck默認(rèn)的就是asp的，把100行以下的所有被注釋掉的代碼全部刪掉就行，然后再把下面所有有關(guān)于browser.html和upload.asp的后面的?Type=XX都改成Type=YY，其中YY為你想保存文件的文件夾名稱。

　　而如果你還想用自己的表情圖標(biāo)的話，那跳到131行，改掉那個表情圖標(biāo)的文件夾地址，以及下面的表情圖標(biāo)的文件名，再下面那三個數(shù)字是每行顯示表情數(shù)及彈出窗口的寬和高了，這個的大小要根據(jù)您的表情圖標(biāo)排列的窗口的大小而定了。OK，總配置文件修改結(jié)束。

　　接下來是編輯器位置的設(shè)置，我的習(xí)慣是把editor放在根目錄下，最開始所述的五個文件也放在根目錄下（Tips:建議放在根目錄下，并且建議使用時設(shè)置路徑也采用絕對路徑，如"/fckeditor/"，而我的習(xí)慣的設(shè)置是"/"），這樣有利于fckeditor的更新升級，并且網(wǎng)站下所有文件夾都可以任意調(diào)用，不存在其它文件夾名變了而其它地方就無法使用編輯器的問題。

　　打開fckeditor.asp文件，找到 sBasePath = "/fckeditor/"改為 sBasePath = "/"
　　打開fckeditor.js文件，找到 this.BasePath = '/fckeditor/' ;改為 this.BasePath = '/' ;

　　編輯器域內(nèi)默認(rèn)的顯示字體為12px，而我的主頁默認(rèn)字體為14px，所以看著就很不舒服，想要修改可以通過修改樣式表來達(dá)到要求，打開/editor/css/fck_editorarea.css，把第4行改為 font-size: 14px;即可。

　　接下來就是上傳文件的設(shè)置了，這個比較麻煩，請仔細(xì)操作。

　　打開\editor\filemanager\browser\default\frmresourcetype.html，找到第15行，插入“ ['uploadfile','uploadfile'],”配合上剛才在fckconfig.js里的設(shè)置，那么我的上傳文件路徑就是/uploadfile，當(dāng)然你也可以改成你想要的文件夾，但這里的名稱一定要和fckconfig.js里的那個“Type=YY”里的YY一致才行。

　　還沒完，繼續(xù)進(jìn)入到editor\filemanager\browser\default\connectors\asp，打開config.asp，先把ConfigIsEnabled = False改成為ConfigIsEnabled = True，要不是沒法上傳文件的，再把ConfigUserFilesPath = "/UserFile"改成我想要的ConfigUserFilesPath = "/"。
　　接著在“Set ConfigDeniedExtensions = CreateObject( "Scripting.Dictionary" )”后面加入ConfigAllowedExtensions.Add "uploadfile", ""
ConfigDeniedExtensions.Add "uploadfile", ""
同理，這里的設(shè)置也是要和上面以及fckconfig.js里面對應(yīng)的。

　　還有一個上傳，就是快速上傳，這個功能是在fckeditor 2.0里才有的，以前的版本沒這個功能。進(jìn)入\editor\filemanager\upload\asp，同樣打開config.asp，也同樣的把ConfigIsEnabled = False 設(shè)置成 ConfigIsEnabled = True，我這里把ConfigUserFilesPath = "/UserFiles/"改成我想要的 ConfigUserFilesPath = "/uploadfile/"& Year(Date()) &"-"& Month(Date()) &"/"，因為我的上傳文件是放在uploadfile文件夾下，并且是按月分開放置的。快速上傳，不會讓你選擇文件夾，而是通過這里的設(shè)置直接上傳的，這兒設(shè)置如果和前面的設(shè)置配合不好的話，你的文件就會被上傳得亂七八糟，很不方便管理。接前重復(fù)前一個config.asp里的操作，在后面加上
ConfigAllowedExtensions.Add "uploadfile", ""
ConfigDeniedExtensions.Add "uploadfile", ""

　　接下來呢，就講一下如何創(chuàng)建自己的在線編輯器，這里以ASP和JS版的為例，ASP版示例代碼，一般用于后臺操作：

<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/"

oFCKeditor.ToolbarSet = "Default"
oFCKeditor.Width = "100%"
oFCKeditor.Height = "400"

oFCKeditor.Value = rs("logbody")
oFCKeditor.Create "logbody"
%>

　　ASP版的，當(dāng)然只能用在以.asp為擴(kuò)展名的頁面中，如果你在前在fckedito.asp里設(shè)置過BasePath為"/"的話，這里就可以省掉第三行，ASP版的只有一個Create函數(shù)。建議在修改一篇內(nèi)容時用ASP版的。

接下來看JS版的：

　　BasePath的設(shè)置同上所述，JS版的可用于任何網(wǎng)頁中，甚至用于html頁面，因為其是客戶端生成的，這樣的好處就是一可以減小網(wǎng)絡(luò)流量，因為編輯器文件只需下載一次，二是可以由客戶端定義什么時候顯示，由于fckeditor初始化需要一定時間，在這一點上JS就很有作用了。

另外，JS版的還有一個功能函數(shù)就是ReplaceTextarea()函數(shù)，可以替換指定的TextArea，拿我的網(wǎng)站的日志的回復(fù)部分示例：

把其寫成一個簡單的函數(shù)，當(dāng)用戶顯示打開編輯器時才生成這個fckeditor，不用每次刷新頁面都去初始化一個編輯器，頁面的速度就會快多了。

補遺：前面講到了，說是在編輯已有數(shù)據(jù)內(nèi)容時不要用JS版的，那是因為單引號（'）的問題造成的，在數(shù)據(jù)內(nèi)容里難免會有單引號存在而用JS版生成編輯器時可能就會因為單引號問題，而使編輯器無法正常生成，而采用asp則不同，用ASP版本的是因為數(shù)據(jù)被當(dāng)成是一個變量了，然后直接賦值給編輯器域。還有就是除非你要用ReplaceTextArea()方法來生成編輯器，否則你不需先寫一個<textarea>這樣的標(biāo)簽，一切都會由fckeditor自動生成的，你所需做的只是給fckeditor指定一個實例名。同時你也不用擔(dān)心如何提交，在表單提交的時候，fckeditor會自動提交，提交的變量名是以你指定的fckeditor實例命名的。

FCKEditor在Asp.net環(huán)境下的配置安裝
不知道大家留意到?jīng)]有了:

FreeTextbox 不開源了，雖然我還有它以前的開源版本。
CSDN用的這個在線編輯器很優(yōu)秀。
它的名字叫做FCKEditor
它是開源的
與平臺無關(guān)，最起碼能支持 Asp， Asp.net ， PHP

　　以前我一直用FreeTextBox(主要是從Community Server那里知道的)。但是發(fā)現(xiàn)它并不是想象中好用，主要是上傳圖片沒有弄好。好了好了，言歸正傳，說說我們今天的主角，F(xiàn)CKEditor，怎么在Asp.net中部署吧。

　　首先，他的網(wǎng)站下載吧。這里要注意，你要下載兩個ZIP文件，一個是Core，即核心文件，里面是整個FCKEditor的核心。第二個是For .net的組件。為了描述方便，我將真實文件名附上，以后要自己靈活修改啊。

　　下載的核心文件叫FCKeditor_2.3.1.zip

　　For .net 的文件叫FCKeditor.Net_2.2.zip

　　部署步驟:

　　解壓FCKeditor_2.3.1.zip，將里面的FCKEditor復(fù)制到你的IIS主目錄里面，其實要的效果是能夠這樣訪問到就可以了 http://localhost/Fckeditor/ ，將http://localhost/Fckeditor/fckconfig.js的變量:

　　_FileBrowserLanguage，_QuickUploadLanguage 的值改為 aspx，不難做吧。

　　(可選)將復(fù)制好的FCKEditor里的以 '_' 開頭的文件及文件夾刪除，當(dāng)然如果你是在開發(fā)也可以不刪除，里面都是示例及調(diào)試頁面。

　　解壓縮FCKeditor.Net_2.2.zip，然后在VS.net 2003中添加新的控件那樣添加，bin\Release\FredCK.FCKeditorV2.dll 這個文件，呵呵，以后你就可以隨便拖放這個控件了。

　　(重要)將上面的DLL文件復(fù)制到 http://localhost/FCKeditor/editor/filemanager/upload/aspx/bin/

　　然后在IIS設(shè)置中讓 http://localhost/FCKeditor/editor/filemanager/upload/aspx/ 這個目錄可以運行Aspx。同樣，http://localhost/FCKeditor/editor/filemanager/browser/default/connectors/aspx/ 也要重復(fù)上面的過程。

　　另外一種更加簡單的方法是將FredCK.FCKeditorV2.dll 復(fù)制 http://localhost/FCKeditor/bin/ 目錄下，然后在IIS中創(chuàng)建應(yīng)用程序。

　　這一步的目的是讓:

　　http://localhost/FCKeditor/editor/filemanager/browser/default/connectors/aspx/connector.aspx

　　http://localhost/FCKeditor/editor/filemanager/upload/aspx/upload.aspx

　　這兩個文件能夠工作。

　　好了，到此為止，你在aspx也里面拖入FCKEditor，將BasePath 設(shè)置為 /FCKEditor/就可以用了。

如果:

　　http://localhost/FCKeditor/editor/filemanager/browser/default/connectors/aspx/connector.aspx 工作不正常

　　你在瀏覽服務(wù)器時，就會有XML Request Error:XXXXXXXXXXXXXX(500)錯誤。

　　http://localhost/FCKeditor/editor/filemanager/upload/aspx/upload.aspx

　　你在上傳圖片時，按鈕怎么按都沒有反應(yīng)的。

在jsp環(huán)境中配置使用FCKEditor

FCKeditor是上面的一個開源項目，主要是實現(xiàn)在線網(wǎng)頁編輯器的功能，可以讓web程序擁有如MS Word這樣強(qiáng)大的編輯功能。官方網(wǎng)站為http://www. ，在服務(wù)器端支持ASP.Net、ASP、ClodFusion、PHP、Java等語言，并且支持IE 5+、Mozilla 、Netscape等主流瀏覽器。

　　首先在官方網(wǎng)站下載fckeditor,注意有兩個包，一個是主文件，一個是jsp整合包的。

　　1、解壓FCKeditor_2.2.zip,(FCKeditor主文件)，將FCKeditor目錄復(fù)制到網(wǎng)站根目錄下，

　　2、解壓FCKeditor-2.3.zip,(jsp,FCKeditor整合包)，作用：This is the JSP Integration Pack for using FCKeditor inside a java server page without the complexity of using a Java scriptlets or the javascript api.

　　3、將FCKeditor-2.3/web/WEB-INF/web.xml中的兩個servlet,servlet-mapping定義復(fù)制到自已項目的web.xml文件中
修改

<servlet-mapping>
        <servlet-name>Connector</servlet-name>
        <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>SimpleUploader</servlet-name>
        <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>

　　為

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

　　4、將FCKeditor-2.3/web/WEB-INF/lib目錄下文件復(fù)制到自已項目的lib文件夾中

　　5、在需使用FCKeditor的jsp界面中加入：

// 文件開頭處加入
<%@ taglib uri="http:///tags-fckeditor" prefix="FCK" %>
//要使用的地方加入
<FCK:editor id="content" basePath="/FCKeditor/"
                                imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
                                linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
                                flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
                                imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
                                linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
                                flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
            this is default content :)
</FCK:editor>

　　啟動服務(wù)器測試。。。。成功后，來給FCKeditor瘦瘦身.

　　1、將FCKeditor目錄下及子目錄下所有以”_”下劃線開頭的文件夾刪除
　　2.FCKeditor根目錄下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml其余全部刪除
　　3.將editor/filemanager/upload目錄下文件及文件夾清空.
　　4.還可以將editor/skins目錄下的皮膚文件刪除，只留下default一套皮膚（如果你不需要換皮膚的話）
　　5.還可以將editor/lang目錄下文件刪除，只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件（英文，簡體中文，繁體中文一般應(yīng)該夠用了:) ）

　　完成，現(xiàn)在看是不是清爽了很多？

　　其它問題：
　　在struts+spring+hibernate中使用，上傳圖像功能中可能會出現(xiàn)報：
　　The output format must have a ‘{http://xml./xalan}content-handler’ property!
　　錯的情況，將WEB-INF/lib目錄下xalan*.jar刪除試試

　　安全問題：
　　假如在前臺讓普通用戶也能使用FCKEditor,要注意相關(guān)安全問題,在前臺使用時,不要使用默認(rèn)的ToolBar，
　　要將添加圖像，flash，圖像域按鈕去掉
在fckconfig.js中大約78行配置那些數(shù)組中的值就像當(dāng)于界面上的一個功能，你可以強(qiáng)行把每組值試出來代表什么。：P

　　到此安裝FCKeditor就完成了，相關(guān)詳細(xì)配置你可以看FCKeditor-2.3.zip,(jsp,FCKeditor整合包)文件夾中web/_samples目錄下的例子。

PHP環(huán)境下配置在線編輯器FCKeditor

在線編輯器FCKeditor 2.0PHP環(huán)境下試用小記

　　一、簡介
　　2004年11月30日推出了FCKeditor 2.0 RC1版，據(jù)其官方網(wǎng)站稱：這是FCKeditor 2.0版的第一個穩(wěn)定版本。大家現(xiàn)在可以考慮正式使用它了。目前支持的后臺語言有ASP、ASP.Net、PHP和ColdFusion。

　　筆者在經(jīng)過簡單的試用發(fā)現(xiàn)，在線編輯器2.0版確實比1.6版有了許多的改進(jìn)。首先是FCKeditor的文件結(jié)構(gòu)更加清晰，可以更方便地將其部署在自己的系統(tǒng)中。另外2.0版終于支持了Firefox 1.0瀏覽器，這將為FCKeditor贏得更多的使用者。廢話不多說，讓我們趕快來學(xué)習(xí)如何安裝、配置FCKeditor 2.0吧。

　　二、安裝與范例

　　首先到http:///projects/fckeditor/ 下載FCKeditor 2.0 RC1（554K），并將其解壓縮到你的網(wǎng)站目錄里面，并將文件夾名改為FCKeditor。舉例來說，如果你的網(wǎng)站放在shaof這個目錄下面，則在這個目錄中建立3個子目錄：

n FCKeditor：存放從網(wǎng)站上下載的FCKeditor在線編輯器

n upimages：用于存放上傳的圖片

n admin：里面存放測試頁面

　　網(wǎng)站的結(jié)構(gòu)如下：

      /FCKeditor           //FCKeditor目錄
      /UserFiles            //上傳文件目錄
      /admin
              test.php          //提交數(shù)據(jù)頁面
              testsubmit.php     //顯示數(shù)據(jù)頁面

　　進(jìn)入到FCKeditor目錄下，打開_samples目錄，里面含有各種編程語言調(diào)用FCKeditor的范例程序頁面，其中php目錄中包含著一些使用PHP來調(diào)用FCKeditor的范例，大家可以看一下，了解FCKeditord的調(diào)用方法，下面是我簡寫了一個test.php程序，放在網(wǎng)站根目錄下的admin目錄中：

if($_POST["ADD"]){
       $Content=$_POST['EditorDefault'];
echo $Content;
//變量$Content就是我們在FCKeditord里面編輯的內(nèi)容，這里可以將其保存到數(shù)據(jù)庫，代碼省略。
}

　　三、配置在線編輯器

　　FCKeditor 2.0的配置文件為FCKeditor\fckconfig.js，其中幾個重要的配置項目如下：

　　1、工具欄的設(shè)置

默認(rèn)情況下，F(xiàn)CKeditor會調(diào)用如下的工具欄按鈕，大家可以根據(jù)自己的需要進(jìn)行增減。需要注意的是，2.0版與1.6版的按鈕并不完全相同，有些按鈕以及刪除或者改名了。

//##
//## Toolbar Buttons Sets
//##
FCKConfig.ToolbarSets["Default"] = [
       ['Source','-','Save','NewPage','Preview'],
       ['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],
       ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
       ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
       ['OrderedList','UnorderedList','-','Outdent','Indent'],
       ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
       ['Link','Unlink'],
       ['Image','Table','Rule','SpecialChar','Smiley'],
       ['Style','FontFormat','FontName','FontSize'],
       ['TextColor','BGColor'],
       ['About']
] ;

　　2、簡體中文設(shè)置

　　編輯edit/lang/fcklanguagemanager.js

　　將下面語句

FCKLanguageManager.AvailableLanguages =
{
'ar'  : 'Arabic',
'bs'  : 'Bosnian',
'ca'  : 'Catalan',
'en'  : 'English',
'es'  : 'Spanish',
'et'  : 'Estonian',
'fi'  : 'Finnish',
'fr'  : 'French',
'gr'  : 'Greek',
'he'  : 'Hebrew',
'hr'  : 'Croatian',
'it'  : 'Italian',
'ko'  : 'Korean',
'lt'  : 'Lithuanian',
'no'  : 'Norwegian',
'pl'  : 'Polish',
'sr'  : 'Serbian (Cyrillic)',
'sr-latn' : 'Serbian (Latin)',
'sv'  : 'Swedish'
}

　　添加一行 'zh-cn' : 'Chinese' 從而變成

　　然后到這里http://www./download/zh-cn.js下載漢化好的zh-cn.js保存到editor/lang目錄下即可。

　　四、設(shè)置文件上傳

　　FCKeditor 2.0在線編輯器采用了一種名為“Connector”（連接器）的技術(shù)來實現(xiàn)對文件的瀏覽以及上傳。下圖顯示了文件瀏覽的工作流程圖。

　　從圖中可以看出，當(dāng)客戶端向服務(wù)器發(fā)出一個文件操作請求后，Connector就會對此請求進(jìn)行響應(yīng)，在服務(wù)器的文件系統(tǒng)中進(jìn)行執(zhí)行操作，如：文件和文件夾的瀏覽以及創(chuàng)建操作。最后將結(jié)果以XML的格式回應(yīng)給客戶端。具體的技術(shù)細(xì)節(jié)大家可以閱讀FCKeditor自帶的說明指南。

　　落實到應(yīng)用，首先我們要選擇一個后臺語言用來實現(xiàn)這個功能，這里我們以PHP為例進(jìn)行說明。

　　1、修改配置文件FCKeditor\fckconfig.js中的兩段內(nèi)容

//Link Browsing
FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/php/connector.php" ;
FCKConfig.LinkBrowserWindowWidth = screen.width * 0.7 ;    // 70%
FCKConfig.LinkBrowserWindowHeight       = screen.height * 0.7 ;   // 70%
//Image Browsing
FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php" ;
FCKConfig.ImageBrowserWindowWidth  = screen.width * 0.7 ;     // 70% ;
FCKConfig.ImageBrowserWindowHeight = screen.height * 0.7 ;       // 70% ;

　　2、修改配置文件

FCKeditor\editor\filemanager\browser\default\connectors\php\connector.php
// Get the "UserFiles" path.
$GLOBALS["UserFilesPath"] = '/UserFiles/' ;

　　UserFiles為文件上傳的路徑，與本文開頭所給的例子相對應(yīng)，大家可以自行修改。

　　好啦，只需要兩步就完成了文件上傳的配置工作，真是簡單呀。以后我們通過FCKeditor上傳的文件都會保存在網(wǎng)站的UserFiles目錄下。

　　五、結(jié)束

　　最后大家可以把FCKeditor目錄下的_docs和_samples兩個目錄刪除以節(jié)省空間。本文是筆者以前寫過的一篇名為《在線編輯器FCKeditor在PHP中的使用方法》（1.6版）文章的升級版本，文章如有不妥之處，還請大家指正。

　　另，遇到的問題

　　1、圖片文件上傳路徑問題

　　安裝我文章里面的設(shè)置，上傳路徑設(shè)置為UserFiles/，但是上傳圖片文件時，F(xiàn)CKeditor都自動把文件上傳到UserFiles/image目錄下面，自做主張的建立了一個image目錄，很是不爽。原因不明。

配置FCKeditor（FCKeditor for java）

1.下載
FCKeditor.java 2.3 (FCKeditot for java)
FCKeditor 2.2 (FCKeditor基本文件)

　　2.建立項目:tomcat/webapps/TestFCKeditor.

　　3.將FCKeditor2.2解壓縮,將整個目錄FCKeditor復(fù)制到項目的根目錄下，
目錄結(jié)構(gòu)為：tomcat/webapps/TestFCKeditor/FCKeditor
然后將FCKeditor-2.3.zip（java）壓縮包中\(zhòng)web\WEB-INF\lib\目錄下的兩個jar文件拷到項目的\WEB-INF\lib\目錄下。把其中的src目錄下的FCKeditor.tld文件copy到TestFCKedit/FCKeitor/WEB-INF/下

　　4.將FCKeditor-2.3.zip壓縮包中\(zhòng)web\WEB-INF\目錄下的web.xml文件合并到項目的\WEB-INF\目錄下的web.xml文件中。

　　5. 修改合并后的web.xml文件，將名為SimpleUploader的Servlet的enabled參數(shù)值改為true，
以允許上傳功能，Connector Servlet的baseDir參數(shù)值用于設(shè)置上傳文件存放的位置。
添加標(biāo)簽定義:

<taglib>
<taglib-uri>/TestFCKeditor</taglib-uri>
<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib>

　　6. 上面文件中兩個servlet的映射分別為：/editor/filemanager/browser/default/connectors/jsp/connector
和/editor/filemanager/upload/simpleuploader，需要在兩個映射前面加上/FCKeditor，
即改為/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector和
/FCKeditor/editor/filemanager/upload/simpleuploader。

　　7.進(jìn)入skin文件夾，如果你想使用fckeditor默認(rèn)的這種奶黃色，
那就把除了default文件夾外的另兩個文件夾直接刪除.

　　8.刪除/FCKeditor/目錄下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四個文件以外的所有文件
刪除目錄/editor/_source,
刪除/editor/filemanager/browser/default/connectors/下的所有文件
刪除/editor/filemanager/upload/下的所有文件
刪除/editor/lang/下的除了fcklanguagemanager.js, en.js, zh.js, zh-cn.js四個文件的所有文件

　　9.打開/FCKeditor/fckconfig.js
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替換成以下內(nèi)容：

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

　　10.其它
fckconfig.js總配置文件，可用記錄本打開，修改后將文件存為utf-8 編碼格式。找到：

　　FCKConfig.TabSpaces = 0 ; 改為FCKConfig.TabSpaces = 1 ; 即在編輯器域內(nèi)可以使用Tab鍵。

　　如果你的編輯器還用在網(wǎng)站前臺的話，比如說用于留言本或是日記回復(fù)時，那就不得不考慮安全了，
      在前臺千萬不要使用Default的toolbar，要么自定義一下功能，要么就用系統(tǒng)已經(jīng)定義好的Basic，
     也就是基本的toolbar，找到：
     FCKConfig.ToolbarSets["Basic"] = [
     ['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-',
     'Smiley','SpecialChar','Replace','Preview'] ] ;
     這是改過的Basic，把圖像功能去掉，把添加鏈接功能去掉，因為圖像和鏈接和flash和圖像按鈕添加功能都能讓前臺
     頁直接訪問和上傳文件， fckeditor還支持編輯域內(nèi)的鼠標(biāo)右鍵功能。

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

     這也是改過的把鼠標(biāo)右鍵的“鏈接、圖像，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' ;

     7、添加頁面

<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%@ taglib uri="/WEB-INF/tlds/FCKeditor.tld" prefix="FCK" %>
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>
<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 oFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "FCKeditor/" ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td></tr></table>
</form>

編輯web.xml 文集添加如下片斷

<servlet>
  <servlet-name>SimpleUploader</servlet-name>
  <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
  <init-param>
   <param-name>baseDir</param-name>
   <param-value>/UserFiles/</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>
   <param-value>false</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>
    <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>

<taglib>
<taglib-uri>/WEB-INF/FCKeditor.tld</taglib-uri>
<taglib-location>/WEB-INF/tlds/FCKeditor.tld</taglib-location>
</taglib>

　　//引入在線編輯器

　　include("../FCKeditor/fckeditor.php") ;
　　這里我們先看一下調(diào)用FCKeditor的函數(shù)，2.0版的調(diào)用方式與1.6版變化不大，如果你以前安裝過FCKeditor 1.6，那么只需要修改很少的代碼升級到2.0。

　　FCKeditor( instanceName[, width, height, toolbarSet, value]

引用值	含義
InstanceName	實例化編輯器所需的唯一名稱
Width	編輯器的寬度，單位為象素或者百分比（可選擇的，默認(rèn)為：100%）
Height	編輯器的高度，單位為象素或者百分比（可選擇的，默認(rèn)為：200）
ToolbarSet	工具欄的名稱（可選擇的，默認(rèn)為：Default）
Value	編輯器的內(nèi)容（HTML）初始值（可選擇的）

　　好啦，下面就讓我們利用這個函數(shù)來定制FCKeditor吧。

$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = '../FCKeditor/' ;
$oFCKeditor->ToolbarSet = 'Default' ;
$oFCKeditor->InstanceName = 'EditorDefault' ;
$oFCKeditor->Width = '100%' ;
$oFCKeditor->Height = '400' ;
$oFCKeditor->Create() ;