Month: 5 月 2009

之前編輯器都是使用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如虎添翼，上傳動作變的非常的順。

最後，祝大家使用愉快~