為網頁加上 FCKeditor

最近因為撰寫國教輔導團輔導員平台程式的需要
第一次實做把 FCKeditor 加入到程式當中
其實這咚咚現在是非常的普遍了
不管是在部落格、公告系統等等地方都可以看到類似的蹤影
這次用的是 FCKeditor 感覺相當平易近人,效果也不錯

不知道與其他版本的編輯器相較之下如何?有機會再試看看好了 ^O^
到底什麼是 FCKeditor ?


就是上面黃色區塊的咚咚啦~ 有沒有恍然大悟的「喔~~」一聲?呵呵~
簡單紀錄一下安裝的方法吧
目前  http://www.fckeditor.net/ 釋出的最新版本是 2.6
下載並解壓縮之後即會產生一個 fckeditor 的目錄
裡頭其實因為不同的安裝環境而異,有不少用不著的檔案可以移除掉
不過,如果不確定的話,建議把  _samples 刪除就好
其他都留著也不見得會有什麼問題啦 ^^
把整個 fckeditor 目錄上傳到網站的目錄當中
接下來有好幾種使用方法,這邊泡泡只列出我有用到的 javascript 與 php 兩種
  • 使用javascript方式加入

首先先在<head> 與 </head> 中加入
<script type="text/javascript" src="/fckeditor/fckeditor.js"</script>
接著就可以在該頁面中使用
<script type="text/javascript">
var oFCKeditor = new FCKeditor( '表單欄位名稱' , 文字區寬度 , 文字區高度 , 工具列組別 , 欄位預設值 );
FCKeditor.Create() ;
</script>
的方式來呼叫囉 :)
其中括號內的藍色字體實際上是可以視情形輸入或者忽略的 
當中比較需要解釋的應該是 工具列組別 的部分
也就是說,您可以設定好很多不同的工具列組合
接著就可以在不同需要的頁面呼叫出來使用喔
修改這些組合、設定的位置是在 fckconfig.js 這個檔案當中
例如我可以設定一組
FCKConfig.ToolbarSets["bubble"] = [
   ..........................................(打開fckconfig.js 應該就可以看到範例了 )
];
這樣一來,就擁有了一個可以呼叫的工具列組合叫做 bubble
這種方法已經是簡單易學嚕 :)

  • 使用 php 方式加入
以上述的做法來看,已經是相當簡單的囉~
不過,如果遭遇到的情況是,這個 fckeditor 的欄位預設值要跟php網頁程式中的變數來做溝通
那麼就必須採用php的加入方式才有更大的彈性了  :)
做法其實也相當簡單 ^O^
只需要先在程式的前端  
<?php include_once("fckeditor/fckeditor.php") ; ?>
引入這個檔案就算完成了
可是還要呼叫 fckeditor 才算數阿 ^^
  <?php
     $oFCKeditor = new FCKeditor('欄位名稱') ;
     $oFCKeditor->BasePath = '/fckeditor/' ;
     $oFCKeditor->Width = 指定寬度 ;
     $oFCKeditor->Height = 指定高度 ;
     $oFCKeditor->ToolbarSet = 工具列名稱 ;
     $oFCKeditor->Value = 變數 ;
     $oFCKeditor->Create() ;
     ?>
想知道還有什麼變數可以指定的話呢? 
只需要去看看 fckeditor_php4.php 或者 fckeditor_php5.php 
應該就不難理解了吧  ^O^
另外 FCKeditor 也有提供檔案上傳的功能
( 雖然我不是很贊成用這樣的方式來上傳檔案啦 )
您想修改安裝的話,可以參考  http://www.neo.com.tw/archives/000883.html
~ ^^ ~

相關閱讀

留言