2007/12/24

在網頁中嵌入 FCKeditor by PHP

網路上的所見即得編輯器真多,昨天為了讓使用者不用自己打 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/

沒有留言:

張貼留言