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 版之後才能真的自訂,所以就暫時不去討論它了。