線上編輯器FCKeditor 2.0試用小記_PHP

FCKEditor

線上編輯器FCKeditor 2.0試用小記

一、簡介
　　2004年11月30日推出了FCKeditor 2.0 RC1版，據其官方網站稱：這是FCKeditor 2.0版的第一個穩定版本。大家現在可以考慮正式使用它了。目前支援的後台語言有ASP、ASP.Net、PHP和ColdFusion。

　　筆者在經過簡單的試用發現，線上編輯器2.0版確實比1.6版有了許多的改進。首先是FCKeditor的檔案結構更加清晰，可以更方便地將其部署在自己的系統中。另外2.0版終於支援了Firefox 1.0瀏覽器，這將為FCKeditor贏得更多的使用者。廢話不多說，讓我們趕快來學習如何安裝、配置FCKeditor 2.0吧。

二、安裝與範例

　　首先到http://sourceforge.net/projects/fckeditor/ 下載FCKeditor 2.0 RC1（554K），並將其解壓縮到你的網站目錄裡面，並將檔案夾名改為FCKeditor。舉例來說，如果你的網站放在shaof這個目錄下面，則在這個目錄中建立3個子目錄：

n FCKeditor：存放從網站上下載的FCKeditor線上編輯器
n upimages：用於存放上傳的圖片
n admin：裡面存放測試頁面

網站的結構如下：

/FCKeditor //FCKeditor目錄
/UserFiles //上傳檔案目錄
/admin
test.php //提交資料頁面
testsubmit.php //顯示資料頁面

　　進入到FCKeditor目錄下，開啟_samples目錄，裡面含有各種程式設計語言調用FCKeditor的範常式序頁面，其中php目錄中包含著一些使用PHP來調用FCKeditor的範例，大家可以看一下，瞭解FCKeditord的調用方法，下面是我簡寫了一個test.php程式，放在網站根目錄下的admin目錄中：

if($_POST["ADD"]){
$Content=$_POST['EditorDefault'];
echo $Content;
//變數$Content就是我們在FCKeditord裡面編輯的內容，這裡可以將其儲存到資料庫，代碼省略。
}
?>
//引入線上編輯器
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目錄，很是不爽。原因不明。

