標籤: 資訊學習

網路上的所見即得編輯器真多，昨天為了讓使用者不用自己打 HTML 標籤，花了一些時間把 FCKeditor 嵌入網頁中使用，功能比我想像中的還要強大！不但基本該有的按鈕都有了，還支援復原、剪貼簿、圖片和檔案上傳、表格、排版，甚至還能編輯表單！連在網頁上面顯示的工具列也可以自訂按鈕功能和版面樣式！

功能強但是安裝卻很簡單，只要在 PHP 程式碼中也只要加入五行左右的程式碼就可以正常運作，不賴吧？

首先你必須先引用 FCKeditor 已經寫好的程式碼，裡面會宣告編輯器所用到的物件和物件屬性：require("fckeditor/fckeditor.php");
再來就可以宣告編輯器物件，並且對物件屬性做設定：

$oFCKeditor = new FCKeditor('FCKeditor1');
$oFCKeditor->BasePath = 'fckeditor/';
$oFCKeditor->Value = 'Default text in editor';

第一行 initialize 中的字串，是產生文字編輯區時編輯區的名稱，也就是 textarea 的 name 屬性，以上面的範例來說，後端要接收資料就要使用：$_POST[‘FCKeditor1’]。
第二行是設定 FCKeditor 程式所在位置，如果沒有設定好，會無法載入 Javascript 和 CSS 檔，到時候網頁會無法顯示。第三行則是文字編輯區預設會出現的文字。

最後在 <form></form> 中間加上：$oFCKeditor->Create();
這樣顯示出來大概會向這樣：

再來我們加入二個參數來設定編輯器預設的大小：

$oFCKeditor->Width = '100%';
$oFCKeditor->Height = '400';

如果你不喜歡預設的版面，FCKeditor 有提供 office2003 和 silver 的版面可以更換，只要加入版面路徑到參數裡面就可以了：
$oFCKeditor->Config['SkinPath'] = 'skins/office2003/';

當然 FCKeditor 的功能不只如此，其他功能在官方的部落格都有詳細的說明。

FCKeditor Wiki
http://wiki.fckeditor.net/FCKeditor

FCKeditor 官網
http://www.fckeditor.net/