FCKeditor使用方法技術詳解
1、概述
FCKeditor是目前最優秀的可見即可得網頁編輯器之一，它採用JavaScript編寫。具備功能強大、配置容易、跨瀏覽器、支援多種程式語言、開源等特點。它非常流行，網際網路上很容易找到相關技術文件，國內許多WEB專案和大型網站均採用了FCKeditor（如百度，阿里巴巴）。本文將通過與PHP相結合，從基本安裝到高階的配置循序漸進介紹給廣大PHPer。
FCKeditor官方網站：http://www.fckeditor.net/
FCKeditor Wiki：http://wiki.fckeditor.net/
2、下載FCKeditor
登入FCKeditor官方站（http://www.fckeditor.net），點選網站右上角“Download”連結。
筆者編寫本文時，FCKeditor當前最新的穩定版本是2.4.3，因此我們下載此版本的zip壓縮格式文件。如圖1所示：
圖1：下載FCKeditor 2.4.3（最新穩定版）
注意：當點選“FCKeditor_2.4.3.zip”連結後，將跳轉到sourceforge.net網站上自動下載。如果您當前使用Linux或Unix系統，可以點選“FCKeditor_2.4.3.tar.gz”連結下載.tar.gz格式的壓縮包。
3、安裝FCKeditor
解壓“FCKeditor_2.4.3.zip”文件到您的網站目錄下，我們先假定您存放FCKeditor和呼叫指令碼存於同一個目錄下。目錄結構如下圖所示：
圖2：網站目錄結構圖
fckeditor目錄包含FCKeditor2.4.3程式檔案。check.php用於處理表單資料。add_article.php和add_article_js.html分別是PHP呼叫FCKeditor和JavaScript呼叫FCKeditor例項指令碼檔案。
3.1、用PHP呼叫FCKeditor
呼叫FCKeditor必須先載入FCKeditor類檔案。具體程式碼如下。
<?php
include("fckeditor/fckeditor.php") ; // 用於載入FCKeditor類檔案
?>
接下來，我們需要建立FCKeditor例項、指定FCKeditor存放路徑和建立（顯示）編輯器等。具體程式碼如下所示（程式碼一般放在表單內）。
<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ; // 建立FCKeditor例項
$oFCKeditor->BasePath = './fckeditor/'; // 設定FCKeditor目錄地址
$FCKeditor->Width='100%'; //設定顯示寬度
$FCKeditor->Height='300px'; //設定顯示高度的高度
$oFCKeditor->Create() ; // 建立編輯器
?>
下面是筆者建立好的例項程式碼，您可將程式碼儲存為add_article.php。
<?php
include("fckeditor/fckeditor.php") ; // 用於載入FCKeditor類檔案
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用PHP呼叫FCKeditor</title>
</head>
<body>
<form action="check.php" method="post" name="exapmle">
<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ; // 建立FCKeditor例項，可建立多個例項
$oFCKeditor->BasePath = './fckeditor/'; // 設定FCKeditor目錄地址
$oFCKeditor->Create() ; // 建立編輯器
?>
<input name="ok" type="submit" value="提交" >
</form>
</body>
</html>
通過瀏覽裡開啟http://you-address/add_article.php 檢視FCKeditor安裝效果。如圖3所示。
圖3：FCKeditor安裝成功
注意：如果您想將FCKeditor建立為HTML結果程式碼，以便於在模板引擎裡面呼叫（如Smarty）可使用如下程式碼。
$output = $oFCKeditor->CreateHtml() ;
現在，您可通過POST方式獲得編輯器的變數值。本例將表單的action設定為check.php，您可在check.php裡使用程式碼
$fckeditorValue = $_POST['FCKeditor1'];
獲得編輯器的變數值了。
FCKeditor安裝成功了。但是，我們還可以通過更多設定來使FCKeditor更加靈活人性化。具體方法文字後面介紹。
3.2、用JavaScript呼叫FCKeditor
呼叫FCKeditor必須先載入FCKeditor類檔案，但與PHP呼叫方法不同，應用下面的程式碼。
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script> <!--載入fckeditor類-->
載入FCKeditor類成功後，有三種方法建立（顯示）編輯器。
一：內嵌方法（推薦）
在您想要顯示FCKeditor的地方建立如下程式碼（通常在表單裡）：
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "./fckeditor /";
oFCKeditor.Create();
</script>
下面是筆者建立好的例項程式碼，您可將程式碼儲存為add_article_js.html。
<html>
<head>
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script> <!--載入fckeditor類-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用JavaScript呼叫FCKeditor</title>
</head>
<body>
<form action="check.php" method="post" name="example">
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.Create();
</script>
<input name="ok" type="submit" value="提交" >
</form>
</body>
</html>
通過瀏覽裡開啟http://you-address/add_article_js.html 檢視FCKeditor安裝效果。效果和圖3完全一樣。
同樣，如果您可以使用和前面一樣的方法取得編輯器的POST變數值。
$fckeditorValue = $_POST['FCKeditor1'];
二：文字區域（TEXTAREA）方法
同內嵌方法一樣，也必須先載入fckeditor類。但建立（顯示）編輯器同內嵌方法不同，我們需要為window.onload定義一個函式。這樣，函式便可以在頁面載入時執行了。函式的定義程式碼如下所示。
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "./FCKeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
接著，您就可以在頁面中（通常在表單裡）定義id為MyTextarea的文字區域（TEXTAREA）。程式碼如下所示：
<textarea id ="MyTextarea" name="MyTextarea" ></textarea>
下面是筆者建立好的例項程式碼，顯示效果當然也是一樣的。筆者這裡就不哆嗦了。
<html>
<head>
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script> <!--載入fckeditor類-->
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "./fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用JavaScript呼叫FCKeditor</title>
</head>
<body>
<form action="check.php" method="post" name="example">
<textarea id ="MyTextarea" name="MyTextarea" ></textarea>
<input name="ok" type="submit" value="提交">
</form>
</body>
</html>
三：適合於Ajax的呼叫方法
同理，您同樣需要載入類檔案。然後使用下面的程式碼對div元素建立（顯示）編輯器。
var div = document.getElementById("myFCKeditor"); //使用getElementById方法取得myFCKeditor ID元素
var fck = new FCKeditor("myFCKeditor"); //建立fckeditor例項
div.innerHTML = fck.CreateHtml();//使用innerHTML方法，在myFCKeditor div元素裡建立編輯器
和使用PHP呼叫fckeditor例項一樣，用javascript方法呼叫fckeditor例項也可以設定編輯器寬度和高度等。
oFCKeditor.Height = 400 ; // 400 畫素
oFCKeditor.Height = "250" ; // 250 畫素
oFCKeditor.Width = "100%" ; // 百分比
4、FCKeditor常用設定
FCKeditor已經安裝成功了，也可以使用了。但是我們可以通過一些簡單的設定使FCKeditor更加符合您的專案需求。
設定工具欄很簡單，只需開啟fckeditor目錄下面的fckconfig.js檔案，按CTRL+F搜尋FCKConfig.ToolbarSets["Default"]程式碼，找到如下程式碼。
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','-','About']
]
在預設情況下，FCKeditor會呼叫上面定義的所有工具欄按鈕。大家可以根據自己的需求進行設定。表1對上面的配置選項功能說明進行彙總。
|
程式碼名稱 |
功能 |
程式碼名稱 |
功能 |
|
Source |
原始碼 |
DocProps |
頁面屬性 |
|
- |
｜分隔符 |
Save |
儲存 |
|
NewPage |
新建 |
Preview |
預覽 |
|
Templates |
模板 |
Cut |
剪下 |
|
Copy |
複製 |
Paste |
貼上 |
|
PasteText |
貼上為無格式文字 |
PasteWord |
從MS Word貼上 |
|
|
列印 |
SpellCheck |
拼寫檢查 |
|
Undo |
撤消 |
Redo |
重做 |
|
Find |
查詢 |
Replace |
替換 |
|
SelectAll |
全選 |
RemoveFormat |
清除格式 |
|
Form |
表單 |
Checkbox |
核取方塊 |
|
Radio |
單選框 |
TextField |
單行文字 |
|
Textarea |
多行文字 |
Select |
列表選單 |
|
Button |
按鈕 |
ImageButton |
影像域 |
|
HiddenField |
隱藏域 |
Bold |
加粗 |
|
Italic |
傾斜 |
Underline |
下劃線 |
|
StrikeThrough |
刪除線 |
Subscript |
下標 |
|
Superscript |
上標 |
OrderedList |
插入／刪除編號列表 |
|
UnorderedList |
插入／刪除專案列表 |
Outdent |
減少縮排 |
|
Indent |
增加縮排 |
JustifyLeft |
左對齊 |
|
JustifyCenter |
居中對齊 |
JustifyRight |
右對齊 |
|
JustifyFull |
兩端對齊 |
Link |
插入／編輯連結 |
|
Unlink |
取消連結 |
Anchor |
插入／編輯錨點連結 |
|
Image |
插入編輯影像 |
Flash |
插入／編輯Flash |
|
Table |
插入／編輯表格 |
Rule |
插入水平線 |
|
Smiley |
插入表情 |
SpecialChar |
插入特殊符號 |
|
PageBreak |
插入分頁 |
Style |
樣式 |
|
FontFormat |
格式 |
FontName |
字型 |
|
FontSize |
大小 |
TextColor |
文字顏色 |
|
BGColor |
背景顏色 |
FitWindow |
全屏編輯 |
|
About |
關於Fuckeditor |
表1：工具欄配置選項功能進行彙總
你也可以建立一個非預設的工具欄按鈕設定，您可以從FCKConfig.ToolbarSets["Default"]當中的程式碼重新複製一份，然後將Default改成您想要的名字。
注意：fckconfig.js配置選項採用JavaScript語法，如果您不懂JavaScript的話，請在配置之前進行備份。
筆者這裡配置了一個適合於大部份網站使用的工欄目按鈕（取消了一些不常用的工具欄按鈕，並重新佈局）。
FCKConfig.ToolbarSets["MyDesign"] = [
['Cut','Copy','Paste','PasteText','PasteWord','-','Undo','Redo','-','Find','Replace','-','RemoveFormat'],
['Link','Unlink','-','Image','Flash','Table'],
['FitWindow','-','Source'],
'/',
['FontFormat','FontSize'],
['Bold','Italic','Underline'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight'],
['TextColor']
] ;
要想使用自定義的工具欄按鈕，必須在建立FCKeditor例項後設定使用的工具欄選項。
$oFCKeditor->ToolbarSet = ' MyDesign ' ; //PHP
oFCKeditor.ToolbarSet = "MyDesign"; //JavaScript
接下來，我們對常用的一些設定選項功能進行總結，讀者可參考fckeditor目錄下fckconfig.js檔案進行閱讀。見表2
|
FCKConfig.AutoDetectLanguage |
自動語言檢查 |
|
FCKConfig.DefaultLanguage |
預設語言設計，建議改成zh-cn |
|
FCKConfig.ContextMenu |
右鍵選單內容 |
|
FCKConfig.ToolbarStartExpanded |
當頁面載入的時候，工具欄預設情況下是否展開 |
|
FCKConfig.FontColors |
文字顏色列表 |
|
FCKConfig.FontNames |
字型列表，可加入國內常用的字型，如宋體、揩體、黑體等 |
|
FCKConfig.FontSizes |
字號列表 |
|
FCKConfig.FontFormats |
文字格式列表 |
|
FCKConfig.StylesXmlPath |
指定風格XML檔案路徑 |
|
FCKConfig.TemplatesXmlPath |
指定模板XML檔案路徑 |
|
FCKConfig.BodyId |
設定編輯器的id |
|
FCKConfig.BodyClass |
設定編輯器的class |
|
FCKConfig.DefaultLinkTarget |
設定連結預設情況下的target屬性 |
|
FCKConfig.BaseHref |
相對連結的基地址 |
|
FCKConfig.SkinPath |
設定預設皮膚路徑 |
|
FCKConfig.SmileyPath |
表情檔案路徑，您可以設定此項更改表情 |
|
FCKConfig.SmileyImage |
表情檔案 |
|
FCKConfig.SmileyColumns |
將表情分成幾列顯示 |
|
FCKConfig.SmileyWindowWidth |
顯示錶情視窗的寬度，單位畫素 |
|
FCKConfig.SmileyWindowHeight |
顯示錶情視窗的高度，單位畫素 |
表2：常用設定選項功能彙總
表2是筆者認為最重要的幾個常選項，如果讀者還需要更多選項的詳細資訊，可訪問http://warran.blueidea.com/archives/2006/3467.shtml網址獲得。
5、配置上傳\檔案瀏覽功能
5.1、配置上傳
要使您的FCKeditor能夠使用上傳功能，您必須進行以下配製。
注意：FCKeditor不支援虛擬目錄，您的路徑設定都是針對網站根目錄的絕對路徑而言的。這點對於釋出到遠端網站目錄的開發者極為不便，後面我們會對此進行討論。
一、開啟fckeditor\editor\filemanager\upload\php\config.php，找到程式碼$Config['Enabled']，將值設定為true。
二、接下來幾行，設定$Config['UserFilesPath']，設定上傳路徑。
三、開啟fckeditor\fckconfig.js檔案，找到程式碼_FileBrowserLanguage，將值設定為php。接下來一行，把_QuickUploadLanguage值也設定為php。
5.2、配置檔案瀏覽
一、開啟fckeditor\editor\filemanager\browser\default\connectors\php\config.php
找到程式碼$Config['Enabled']，將值設定為true;
二、接下來幾行，設定$Config['UserFilesPath']，設定瀏覽路徑。
5.3 、關於上傳\檔案瀏覽安全性問題
為了解決FCKeditor不支援虛擬目錄問題，和FCKeditor檔案上傳的安全性考良。我們有必要在這裡單論對此進行討論。
開啟fckeditor\editor\filemanager\upload\php\config.php，找到$Config['UserFilesPath']程式碼，在此行程式碼之前定義變數$root_path = $_SERVER['PHP_SELF'];
重新設定$Config['UserFilesPath']變數的值，示例如下。
$Config['UserFilesPath'] = $root_path . '您想上傳的目錄名/' ;
開啟fckeditor\editor\filemanager\browser\default\connectors\php\config.php，找到程式碼$Config['UserFilesPath'],在此行程式碼之前定義變數$root_path = $_SERVER['PHP_SELF'];
重新設定$Config['UserFilesPath']變數的值，示例如下。
$Config['UserFilesPath'] = $root_path . '您想瀏覽的目錄名/'
至此，您的FCKeditor已解決不支援虛擬目錄問題。接下來，我們介紹一種技巧配置只允許管理員才可以使用FCKeditor上傳問題。
解決方法其實很簡單，假如網站採用$_SESSION['admin_id']驗證管理員的登入id，您只需將相關的指令碼檔案引入即可。然後使用下面的程式碼配置檔案上傳\瀏覽開關。
$Config['Enabled'] = isset($_SESSION['admin_id']);
6、FCKeditor Api
最詳細的FCKeditor Api文件默過於官方wiki提供的文件了。
FCKeditor Api官方文件地址：http://wiki.fckeditor.net/Developer's_Guide/Javascript_API
下面提供國內某網友的翻譯文件，轉載地址：http://blog.imwebs.com/article.asp?id=322
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();
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
7、精簡FCKeditor檔案空間大小
FCKeditor目錄下面包含有許多示例程式碼，文件等資源，在我們的WEB專案正式釋出式前，這些檔案不但沒有任何意義，反而會佔用相當大的空間。下面我們介紹如何刪除這些檔案。
一：刪除所有以“_”開頭的資料夾
二：刪除fckeditor目錄下面除fckconfig.js、fckeditor.js、fckeditor.php、fckeditor_php4.php、fckeditor_php5.php、fckpackager.xml、fckstyles.xml、fcktemplates.xml、editor目錄以外的所有檔案（即，只保留剛才提到的幾個檔案和一個目錄）。
三：進入fckeditor\editor\filemanager\browser\default\connectors資料夾，只保留PHP資料夾和test.html檔案。
四：進入fckeditor\editor\filemanager\upload資料夾，只保留PHP資料夾和test.html檔案。
五：進入fckeditor\editor資料夾，這個目錄下面是一些語言包檔案。除保留_getfontformat.html、_translationstatus.txt、en.js、zh.js、zh-cn.js外，其它語言包對國內專案來說意義不大，可以刪除。
六：進入fckeditor\editor\skins資料夾，該資料夾儲存FCKeditor檔案，如果您不想用可以刪除。