之前編輯器都是使用TinyMCE，其實用起來也蠻習慣的，很多人批評TinyMCE自動加了很多不必要的HTML Tag，所以很多人不用，我用起來是還好，反正我對HTML也蠻熟的，有什麼怪怪的地方我看的出來。TinyMCE是一套優秀的網頁資料編輯器，很多地方都可以看到它的蹤影。
接下來進入FCKEditor的主題吧！先講ToolBar吧！
可以在 /fckeditor/fckconfig.js中自行定義
設定在
FCKConfig.ToolbarSets[“Name”] = [
參考下面的對照表吧！
] ;
並且在呼叫fckeditor.php後設定
|
參數
|
說明
|
參數
|
說明
|
|
Source
|
原始碼
|
DocProps
|
文件屬性
|
|
Save
|
儲存
|
NewPage
|
開新檔案
|
|
Preview
|
預覽
|
Templates
|
樣板
|
|
Cut
|
剪下
|
Copy
|
拷貝
|
|
Paste
|
貼上
|
PasteText
|
貼為純文字
|
|
PasteWord
|
從 Word 貼上
|
Print
|
列印
|
|
SpellCheck
|
拼字檢查
|
Undo
|
復原
|
|
Redo
|
復原
|
Find
|
尋找
|
|
Replace
|
取代
|
SelectAll
|
全選
|
|
RemoveFormat
|
清除格式
|
Form
|
表單
|
|
Checkbox
|
核取方塊
|
Radio
|
選項按鈕
|
|
TextField
|
文字區域
|
Select
|
下拉選單
|
|
Button
|
按鈕
|
ImageButton
|
影像按鈕
|
|
HiddenField
|
隱藏欄位
|
Bold
|
粗體
|
|
Italic
|
斜體
|
Underline
|
底線
|
|
StrikeThrough
|
刪除線
|
Subscript
|
下標字
|
|
Superscript
|
上標字
|
OrderedList
|
數字項目符號
|
|
UnorderedList
|
項目符號
|
Outdent
|
減少縮排
|
|
Indent
|
增加縮排
|
Blockquote
|
區塊引用
|
|
JustifyLeft
|
靠左
|
JustifyCenter
|
置中
|
|
JustifyRight
|
靠右
|
JustifyFull
|
左右對齊
|
|
Link
|
建立連結
|
Unlink
|
移除連結
|
|
Anchor
|
錨點
|
Image
|
插入圖片
|
|
Flash
|
插入Flash
|
Table
|
插入表格
|
|
Rule
|
插入水平線
|
Smiley
|
表情符號
|
|
SpecialChar
|
特殊符號
|
PageBreak
|
分頁符號
|
|
Style
|
樣式
|
FontFormat
|
字體格式
|
|
FontName
|
字型選擇
|
FontSize
|
字型大小
|
|
TextColor
|
文字顏色
|
BGColor
|
背景顏色
|
|
FitWindow
|
編輯器最大化
|
ShowBlocks
|
顯示HTML標籤區塊
|
|
About
|
關於FCKeditor
|
|
|
實際測試的結果，在Firefox 3.0.10中
自定的Toolbar SET會有問題，怎麼弄就是呼叫不到
網路上的做法是說，把Default的Tool Set改名
把自己定義的Tool Set設定在Default裡面就好。
外觀(Skin)的修改，也是修改fckconfig,js
FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/office2007/’ ;
把要換上的外觀(皮膚,skin)路上修改好存檔即可。
按這裡可以下載FCKeditor最新的外觀(皮膚)
再來說PHP中的調用方式吧！
<?php
include_once(“./fckeditor/fckeditor.php”) ; //呼叫fckeditor的設定檔進來
$oFCKeditor = new FCKeditor(‘FCKeditor1’) ; //要傳送的變數名稱定義為FCKeditor1
$oFCKeditor->BasePath = ‘./fckeditor/’ ; //設定一下路徑
$oFCKeditor->Config[‘EnterMode’] = ‘br’; //設定換行的方式是要用BR 或是 P
$oFCKeditor->Value = ‘Some sample text here.’ ; //設定預設值
$oFCKeditor->Width = ‘547’; //設定寬度
$oFCKeditor->Height = ‘400’; //設定高度
?>
<form action=”./getdata.php” method=”post” target=””>
<?php
$oFCKeditor->Create() ; //建立FCKeditor的物件
?>
<br>
<input type=”submit” value=”Submit”>
</form>
接收的檔案叫getdata.php
內容超簡單的
<?php
$ans=stripslashes( $_POST[‘FCKeditor1’] ) ; //去掉頭尾的空白
?>
<?php echo $ans; //顯示出內容 ?>
設定模板(Template)的方式
設定檔在 \fckeditor\fcktemplates.xml
圖檔位置在 \fckeditor\editor\dialog\fck_template\images
雖然fcktemplates.xml裡面的內容是xml
也沒有這麼難啦！按照裡面的範例改一下
就可以弄出自己相要的模板，而且連預設圖案都可以放上去。
我總共設計了5個模板，請參考下圖。(PS.私人設計，恕不分享)
FCKeditor的圖片功能蠻強的，可以將圖片自己上傳到主機上，上傳之後，再從主機上選擇，選擇後，系統會自動把圖片的路徑填好。
缺點1 沒有辦法看到縮圖(有網友公佈自己修改出縮圖的方法)。
缺點2 自己上傳檔案，其實有些網路使用者認為不安全。
Filemanager要設定好才可以順利上傳
設定檔fckeditor\editor\filemanager\connectors\php
改成這樣==>
$Config[‘Enabled’] = true ;
$Config[‘UserFilesPath’] = ‘你要存放的路徑’ ;
fckconfig.js中也要改一下
var _FileBrowserLanguage = ‘php’ ; <—-設定我們所使用的語言
就可以上傳和使用檔案了
我的版型Sample
其實這樣的使用方式並不順，用FCKeditor的Filemanager來上傳檔案，仍有許多的問題，有網友把Filemanager做了修改，可以自動產生縮圖，但是這樣FCKeditor就完全失去了相容性，日後版本升級，上傳的部份就會失效，要怎麼處理呢？FCKeditor有一隻Plugin叫我CKFinder，等我有空的時候再來寫一下怎麼使用CKFinder來上傳檔案好了，當然CKFinder不是只能上傳圖片，文件(PDF,word,excel,powerpoint)等，通通都可以上傳哦！正式版是要錢的，但是Demo版的是不用錢的，Demo版的CKFinder就讓FCKeditor如虎添翼，上傳動作變的非常的順。
最後，祝大家使用愉快~
