ในการใช้งาน FCKEditor บางครั้งเราอาจไม่ต้องการความสามารถทั้งหมดของมัน หรือเพื่อความปลอดภัยเราอาจไม่ต้องการให้บุคคลทั่วไปใช้ความสามารถพิเศษของมันได้ หนทางหนึ่งในการควบคุม FCKEditor ก็คือการกำหนด toolbar เพื่อให้มันมีความสามารถตามต้องการครับ

ความลับของมันอยู่ที่ไฟล์ 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 เล็กๆน้อยๆนะครับ แต่ละบล๊อกที่เห็น [.....] หมายถึงการจัดกลุ่มปุ่มต่างๆ โดยคั่นแต่ละปุ่มด้วย , และเราสามารถสั่งให้ทูลบาร์ขึ้นบรรทัดใหม่ด้วย '/' ครับ และ '-' คือการแสดงเส้นคั่นปุ่มครับ