toolbar ของ FCKEditor

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