toolbar ของ 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','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
โค้ดด้านบนคือทูลบาร์ทั้งหมดที่มีได้ของ FCKEditor ครับ ซึ่งชื่อของ toolbar นี้คือ Default ซึ่งในการเรียกใช้ toolbar ใดๆเราสามารถกำหนดได้ตอนที่เรียกใช้ FCKEditor ครับ
var oFCKeditor = new FCKeditor("detail");
oFCKeditor.BasePath = "/";
oFCKeditor.ToolbarSet = "Default";
oFCKeditor.Height = "500";
oFCKeditor.Config['FlashBrowser'] = false;
oFCKeditor.Config['FlashUpload'] = false;
oFCKeditor.Config['LinkBrowser'] = true;
oFCKeditor.Config['LinkUpload'] = true;
oFCKeditor.Config['ImageBrowser'] = true;
oFCKeditor.ReplaceTextarea();
ตัวอย่างด้านบนเป็นการกำหนดให้ FCKEditor แสดงทูลบาร์ทั้งหมด โดยใช้ทูลบาร์ชื่อ Default ตามที่กำหนดไว้ใน ToolbarSets ครับ
และหากเราต้องการ toolbar ที่เป็นแบบอื่น เช่นบอร์ดของผมก็สามารถกำหนดได้ ดังนี้ครับ
FCKConfig.ToolbarSets["COMMENT"] = [
['JustifyLeft','JustifyCenter','JustifyRight'],
['Link','Unlink','Image','Flash'],
['Rule','Smiley','SpecialChar'],
['Bold','Italic','Underline','StrikeThrough'],
['TextColor','BGColor']
] ;
เป็นการสร้าง toolbar ชื่อ COMMENT ขึ้นมา และเราต้องไปกำหนดให้ FCKEditor เมื่อต้องการใช้งานครับ เช่น
oFCKeditor.ToolbarSet = "COMMENT";
เพิ่มเติม tip เล็กๆน้อยๆนะครับ แต่ละบล๊อกที่เห็น [.....] หมายถึงการจัดกลุ่มปุ่มต่างๆ โดยคั่นแต่ละปุ่มด้วย , และเราสามารถสั่งให้ทูลบาร์ขึ้นบรรทัดใหม่ด้วย '/' ครับ และ '-' คือการแสดงเส้นคั่นปุ่มครับ