之前編輯器都是使用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 貼上 |
|
列印 |
|
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如虎添翼，上傳動作變的非常的順。
最後，祝大家使用愉快~