筆者在經過簡單的試用發現，在線編輯器2.0版確實比1.6版有了許多的改進。首先是fckeditor的文件結構更加清晰，可以更方便地將其部署在自己的系統中。另外2.0版終于支持了firefox 1.0瀏覽器，這將為fckeditor贏得更多的使用者。廢話不多說，讓我們趕快來學習如何安裝、配置fckeditor 2.0吧。
//引入在線編輯器
include("../fckeditor/fckeditor.php") ;
這里我們先看一下調用fckeditor的函數，2.0版的調用方式與1.6版變化不大，如果你以前安裝過fckeditor 1.6，那么只需要修改很少的代碼升級到2.0。
fckeditor( instancename[, width, height, toolbarset, value]
引用值 | 含義 |
instancename | 實例化編輯器所需的唯一名稱 |
width | 編輯器的寬度，單位為象素或者百分比（可選擇的，默認為：100%） |
height | 編輯器的高度，單位為象素或者百分比（可選擇的，默認為：200） |
toolbarset | 工具欄的名稱（可選擇的，默認為：default） |
value | 編輯器的內容（html）初始值（可選擇的） |
好啦，下面就讓我們利用這個函數來定制fckeditor吧。
$ofckeditor = new fckeditor('fckeditor1') ;
$ofckeditor->basepath = '../fckeditor/' ;
$ofckeditor->toolbarset = 'default' ;
$ofckeditor->instancename = 'editordefault' ;
$ofckeditor->width = '100%' ;
$ofckeditor->height = '400' ;
$ofckeditor->create() ;
三、配置在線編輯器
fckeditor 2.0的配置文件為fckeditor/fckconfig.js，其中幾個重要的配置項目如下：
1、工具欄的設置
默認情況下，fckeditor會調用如下的工具欄按鈕，大家可以根據自己的需要進行增減。需要注意的是，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、簡體中文設置
編輯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' 從而變成
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.shaof.com/download/zh-cn.js下載漢化好的zh-cn.js保存到editor/lang目錄下即可。
fckeditor 2.0在線編輯器采用了一種名為“connector”（連接器）的技術來實現對文件的瀏覽以及上傳。下圖顯示了文件瀏覽的工作流程圖。
從圖中可以看出，當客戶端向服務器發出一個文件操作請求后，connector就會對此請求進行響應，在服務器的文件系統中進行執行操作，如：文件和文件夾的瀏覽以及創建操作。最后將結果以xml的格式回應給客戶端。具體的技術細節大家可以閱讀fckeditor自帶的說明指南。
落實到應用，首先我們要選擇一個后臺語言用來實現這個功能，這里我們以php為例進行說明。
1、 修改配置文件fckeditor/fckconfig.js中的兩段內容
//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為文件上傳的路徑，與本文開頭所給的例子相對應，大家可以自行修改。
好啦，只需要兩步就完成了文件上傳的配置工作，真是簡單呀。以后我們通過fckeditor上傳的文件都會保存在網站的userfiles目錄下。
五、結束
最后大家可以把fckeditor目錄下的_docs和_samples兩個目錄刪除以節省空間。本文是筆者以前寫過的一篇名為《在線編輯器fckeditor在php中的使用方法》（1.6版）文章的升級版本，文章如有不妥之處，還請大家指正。
另，遇到的問題
1、圖片文件上傳路徑問題
安裝我文章里面的設置，上傳路徑設置為userfiles/，但是上傳圖片文件時，fckeditor都自動把文件上傳到userfiles/image目錄下面，自做主張的建立了一個image目錄，很是不爽。原因不明。
