[FCKEditor] 關於 FCKEditor 的一些小技巧

FCKEditor (據說已改名為 CKEditor) 是一個免費而又好用的 HTML Editor;如果你想讓你的使用者能從網頁上編輯 HTML 文件,那麼你恐怕很難找到比 FCKEditor 更好用的免費編輯工具。FCKEditor 從 2.0 版之後,功能上有大幅的改進,重要的是,它原有的問題減少了很多,已經可以算是蠻成熟的產品...

FCKEditor (據說已改名為 CKEditor) 是一個免費而又好用的 HTML Editor;如果你想讓你的使用者能從網頁上編輯 HTML 文件,那麼你恐怕很難找到比 FCKEditor 更好用的免費編輯工具。FCKEditor 從 2.0 版之後,功能上有大幅的改進,重要的是,它原有的問題減少了很多,已經可以算是蠻成熟的產品。

由於網路上已有很多對 FCKEditor 的介紹與說明,所以我就不再從頭仔細說明。你不妨看一下 topcat 的文章,除了有入門說明之外,裡面還有解決 Image Uploader 小問題的解法,相信對入門者很有幫助。

不過有一點是 topcat 文章中沒有提到,但使用者卻一定需要的功能,那就是由 FCKEditor 控制項裡面的 ToolbarSet 屬性,用來設定客戶端功能的部份。例如你可以指定 ToolbarSet = "Default" 或 ToolbarSet = "Basic" 來指定客戶端使用哪一種工具集。

不過,你其實可以自訂工具箱裡面各個小工具的位置、數目,或指定使用哪些工具等等。你唯一要做的就是在 FCKEditor 子目錄中找到 fckconfig.js 這個檔案並予以編輯即可。

以下我列出我自己編輯的部份檔案內容供各位參考:

FCKConfig.ToolbarSets["Default"] = [
    ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
    '/',
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['OrderedList','UnorderedList','-','Outdent','Indent'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','-','About']
] ;

FCKConfig.ToolbarSets["Basic"] = [
    ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

FCKConfig.ToolbarSets["myBasic"] = [
    ['Bold','Italic','Underline','TextColor','BGColor','-','Table','OrderedList','UnorderedList','-','
    PasteText','PasteWord','-','Link','Unlink','-','About'],
    '/',
    ['Style','FontFormat','FontName','FontSize']
] ;

以上 FCKConfig.ToolbarSets["myBasic"] 這一段是我新增上去的。藉由編修既有的工具集或新增新的工具集,你就可以隨心所欲的控制你希望讓客戶使用的工具集是什麼樣子。

上面 '-' 和 '/'  是空格或分隔線的意思,你可以和輸出結果比對一下,就應該清楚它的作用。

此外,如果你對它內建可選擇的字型不滿意,那麼你可以指定要使用哪些字型,方法是從 FCKEditor 控制項標籤中加入 FontNames 引數,例如:

FontNames="Arial; Times New Roman; 新細明體; 標楷體" 

要改變 Format 選單,則是加入 FontFormats 引數,如:
 

FontFormats="p;h1;h2;h3;h4" 

FontFormats 可以使用的引數並不能隨便指定,你可以從 /editor/_source/classes/fcktoolbarfontformatcombo.js 看到可使用的列表,包括 p, pre, address... 等等。當然,如果你有時間的話也可以自訂。

最後,其實 FCKEditor 有內建三種 Skin 可以選擇:Default, Office2003 和 Silver。不過要怎麼設定呢?很簡單,加入 SkinPath 引數即可:

SkinPath="skins/silver/"

我把上面所提到過的修改集合起來列在下面:

<FCKeditorV2:FCKeditor ID="txtDescriptionEdit" runat="server" BasePath="~/FCKeditor/"
    Value='<%# Bind("description") %>' ToolbarSet="myBasic" FontNames="Arial; Times New Roman; 新細明體; 標楷體"
    FontFormats="p;h1;h2;h3;h4" SkinPath="skins/silver/" />

對了,基本上文字大小選單也是可以修改的,但是因為到目前為止修改它並沒有太大的作用,要等到 2.5 版之後才能真的自訂,所以就暫時不去討論它了。
 


Dev 2Share @ 點部落