มาปรับแต่ง CKEditor ให้โดนใจกันเถอะ ตอนที่ 2 ปรับแต่งแถบเครื่องมือ


จากบทความตอนแรก เราสามารถใช้งาน CKEditor กับ ASP.NET ในการทำให้คอนโทรล TextBox แปลงโฉมไปเป็น WYSIWYG Rich Text Editor ได้แล้ว สำหรับในตอนที่ 2 นี้ เราจะเริ่มมาปรับแต่ง CKEditor ให้โดนใจกันครับ เริ่มด้วยการปรับแต่งแถบเครื่องมือกันก่อน

ใน CKEditor จะกำหนดแถบเครื่องมือมาให้ 2 แบบ คือแบบ Basic ซึ่งจะมีปุ่มเครื่องมือเฉพาะเท่าที่จำเป็นต้องใช้ และ Full ซึ่งจะมีปุ่มเครื่องมือครบทุกอย่าง

CKEditor_2_Basic
รูปตัวอย่างแถบเครื่องมือแบบ Basic
CKEditor_2_Full
รูปตัวอย่างแถบเครื่องมือแบบ Full

อย่างไรก็ดี เราสามารถกำหนดได้เองว่าต้องการปุ่มเครื่องมืออะไรในแถบเครื่องมือบ้าง ซึ่งเราสามารถทำได้สามวิธีครับ คือ การกำหนดขณะออกแบบ หมายถึงในหน้าเว็บที่ใช้ CKEditor โดยระบุปุ่มเครื่องมือที่ต้องการใช้ในขณะที่สร้าง instance ของ editor วิธีที่สองคือเพิ่มเข้าไปในสคริปต์หลักของ CKEditor (ที่ ckeditor.js) โดยตั้งชื่อให้กับแถบเครื่องมือที่เราสร้าง แล้วเรียกใช้โดยใช้ชื่อที่เราสร้างนั่นเอง (ถ้าอ่านแล้วไม่เข้าใจ เดี๋ยวไปดูโค้ดกันครับ) และวิธีที่สามคือเพิ่มชุดแถบเครื่องมือไว้ที่ configuration file (config.js) แต่ก่อนที่เราจะไปเลือกใช้ปุ่มเครื่องมือในแถบเครื่องมือด้วยตัวเอง เรามาดูกันก่อนว่า ปุ่มเครื่องมือที่ CKEditor เตรียมมาไว้ให้เรานั้นมีอะไรกันบ้าง

[] ระบุขอบเขตของกลุ่มเครื่องมือ ปุ่มเครื่องมือที่มีการทำงานคล้ายคลึงกันจะถูกจัดไว้รวมกันในเครื่องหมาย [ ]
‘-‘ ตัวคั่นระหว่างกลุ่มเครื่องมือ
‘/’ ขึ้นบรรทัดใหม่


กลุ่มเครื่องมือสำหรับการแก้ไขเอกสาร

‘Source’ ดูรหัส html
‘Save’ บันทึก (แต่เท่าที่ผมทดลองมา ปุ่ม ‘บันทึก’ นี้เหมือนไม่ทำงาน ก็เลยไม่แน่ใจว่าจะต้องเพิ่มเติมอะไรที่ไหนอีกหรือไม่ และเนื่องจากปกติผมไม่ได้ใช้ฟีเจอร์นี้ ก็เลย disable มันไว้และก็ยังไม่ได้ค้นคว้าต่อไปว่าจะต้องทำอย่างไรบ้าง)
‘NewPage’ สร้างหน้าเอกสารใหม่ (หากมีข้อมูลเดิมอยู่ก็จะถูกลบหมด)
‘Preview’ ดูหน้าเอกสารตัวอย่าง
‘Templates’ ใช้เทมเพลตที่เตรียมไว้
‘Cut’ ตัดข้อความหรือตัวอักษรที่ต้องการ
‘Copy’ คัดลอกข้อความหรือตัวอักษรที่ต้องการ
‘Paste’ นำข้อความหรือตัวอักษรที่ถูกตัดหรือถูกคัดลอกไว้มาแปะ
‘PasteText’ วางแบบตัวอักษรธรรมดา
‘PasteFromWord’ วางสำเนาจากตัวอักษรเวิร์ด (เท่าที่ทดลองปุ่มนี้มีผลเหมือนกับปุ่ม ‘Paste’)
‘Print’ พิมพ์ข้อความที่พิมพ์ ออกทางเครื่องพิมพ์
‘SpellChecker’ ตรวจสอบการสะกดคำ
‘Scayt’ ตรวจสอบการสะกดคำขณะพิมพ์
‘Undo’ ยกเลิกคำสั่ง
‘Redo’ ทำซ้ำคำสั่ง
‘Find’ ค้นหาข้อความ
‘Replace’ ค้นหาข้อความและแทนที่
‘SelectAll’ เลือกข้อความทั้งหมดที่พิมพ์
‘RemoveFormat’ ลบรูปแบบออก (ผลของคำสั่งนี้จะเหลือเพียงแค่ html tag ปล่าวๆที่ไม่มี attribute ใดๆ เช่น จาก <img align=”left” height=”100″ style=”margin-right: 10px” width=”100″ /> เหลือเพียง <img />)


กลุ่มเครื่องมือสำหรับการสร้างแบบฟอร์ม

‘Form’ แทรกแบบฟอร์มลงในเอกสาร (ผลจากคำสั่งนี้จะได้แท็ก <form  name=”enrolmentForm” id=”enrolmentForm” enctype=”text/plain” method=”post”></form>)
‘Checkbox’ แทรก check box ลงในแบบฟอร์มหรือเอกสาร
‘Radio’ แทรก radio button ลงในแบบฟอร์มหรือเอกสาร
‘TextField’ แทรก text input field ลงในแบบฟอร์มหรือเอกสาร
‘Textarea’ แทรก text input field แบบ multi-line หรือ text area ลงในแบบฟอร์มหรือเอกสาร
‘Select’ แทรก list box ลงในแบบฟอร์มหรือเอกสาร
‘Button’ แทรกปุ่มลงในแบบฟอร์มหรือเอกสาร
‘ImageButton’ แทรกปุ่มแบบรูปภาพ ลงในแบบฟอร์มหรือเอกสารd
‘HiddenField’ แทรก hidden field ลงในแบบฟอร์มหรือเอกสาร<


กลุ่มเครื่องมือสำหรับการจัดรูปแบบตัวอักษร, ข้อความ, รูปภาพ อนิเมชั่น ฯลฯ

‘Bold’ ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัวหนา
‘Italic’ ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัวเอียง
‘Underline’ ขีดเส้นใต้ตัวอักษรหรือข้อความในเอกสาร
‘Strike’ ขีดเส้นทับตัวอักษรหรือข้อความในเอกสาร (ตัวอย่าง A ก)
‘Subscript’ ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัวห้อย
‘Superscript’ ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัวยก
‘NumberedList’ แทรกลำดับรายการแบบตัวเลขลงในเอกสาร
‘BulletedList’ แทรกลำดับรายการแบบสัญลักษณ์ลงในเอกสาร
‘Outdent’ ลดระยะย่อหน้า
‘Indent’ เพิ่มระยะย่อหน้า
‘Blockquote’ แทรก block quote ลงในเอกสาร
‘CreateDiv’ แทรกแท็ก div ลงในเอกสาร
‘JustifyLeft’ จัดชิดซ้าย
‘JustifyCenter’ จัดกึ่งกลางหน้า
‘JustifyRight’ จัดชิดขวา
‘JustifyBlock’ จัดพอดีหน้า
‘Link’ แทรก/แก้ไขการเชื่อมโยงลงในเอกสาร
‘Unlink’ ลบการเชื่อมโยงออกจากเอกสาร
‘Anchor’ แทรก/แก้ไข จุดอ้างอิงสำหรับการเชื่อมโยงลงในเอกสาร
‘Image’ แทรกรูปภาพลงในเอกสาร
‘Flash’ แทรก flash animation ลงในเอกสาร
‘Table’ แทรกตารางลงในเอกสาร
‘HorizontalRule’ แทรกเส้นคั่นบรรทัดลงในเอกสาร
‘Smiley’ แทรกรูปสื่ออารมณ์ลงในเอกสาร
‘SpecialChar’ แทรกตัวอักขระพิเศษลงในเอกสาร (เช่น © ® ™ เป็นต้น)
‘PageBreak’ แทรก page break ลงในเอกสาร (สำหรับการพิมพ์ออกทางเครื่องพิมพ์เท่านั้น)


กลุ่มเครื่องมือสำหรับการจัดรูปแบบเอกสาร

‘Styles’ กำหนดรูปแบบหรือลักษณะการแสดงผลของบล็อกข้อความ
‘Format’ กำหนดรูปแบบหรือลักษณะของย่อหน้า
‘Font’ กำหนดรูปแบบหรือลักษณะของตัวอักษร (เช่น Tahoma, Courier New, Arial ฯลฯ)
‘FontSize’ กำหนดขนาดของตัวอักษร
‘TextColor’ กำหนดสีของตัวอีกษร
‘BGColor’ กำหนดสีของพื้นหลัง
‘Maximize’ ขยายขนาดของ editer ให้เต็มเฟรม
‘ShowBlocks’ แสดง/ซ่อนขอบเขตของย่อหน้า
‘About’ แสดงข้อมูลเกี่ยวกับ CKEditor

เอาละครับ เมื่อเรารู้ว่า CKEditor ได้จัดเตรียมปุ่มเครื่องมืออะไรไว้ให้เราใช้งานบ้าง คราวนี้เราจะมาเลือกเฉพาะปุ่มเครื่องมือที่เราต้องการและจัดหมวดหมู่เสียใหม่ของปุ่มเครื่องมือเสียใหม่ให้ตามใจเรากันเลยครับ

วิธีที่ 1 การกำหนดแถบเครื่องมือขณะออกแบบ โดยระบุปุ่มเครื่องมือที่ต้องการใช้ในขณะที่สร้าง instance ของ editor

<asp:TextBox runat=”server” ID=”txbEditor1″ Width=”500″ Height=”200″ TextMode=”MultiLine” />
<script type=”text/javascript” language=”javascript”>
CKEDITOR.replace(‘txbEditor1’, {
toolbar:
[ [‘Bold’, ‘Italic’, ‘Underline’, ‘-‘, ‘Subscript’, ‘Superscript’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’],
[‘Outdent’, ‘Indent’, ‘-‘, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’], ‘/’,
[‘Image’, ‘Flash’, ‘Smiley’, ‘-‘, ‘Table’, ‘HorizontalRule’, ‘SpecialChar’] ]
});
</script>

 รูปตัวอย่างการกำหนดแถบเครื่องมือของ CKEditor แบบ ad hoc รูปตัวอย่างการกำหนดแถบเครื่องมือของ CKEditor แบบ ad hoc

วิธีที่ 2 เป็นการเพิ่มชุดแถบเครื่องมือแบบถาวร โดยการเพิ่มลงไปในสคริปต์หลักของ CKEditor โดยตรง และทำการกำหนดชื่อให้กับชุดแถบเครื่องมือชุดใหม่ที่เราสร้างขึ้น วิธีนี้จะยุ่งยากซับซ้อนกว่าวิธีแรกสักนิดเพราะเราจะต้องเข้าไปยุ่งกับโค้ด java script ของ CKEditor (คือไฟล์ ckeditor.js)
เริ่มต้น
1. เปิดไฟล์ ckeditor.js (จะเห็นว่าโค้ด java script ของไฟล์นี้มันจะเรียงกันเป็นพืดไปหมด ดังรูปครับ ดังนั้นจะต้องค่อยๆหา) และค้นหาคำว่า ‘i.toolbar_Basic’ จะพบ ข้อความประมาณนี้
i.toolbar_Basic=[[‘Bold’,’Italic’,’-‘,’NumberedList’,’BulletedList’,’-‘,’Link’,’Unlink’,’-‘,’About’]]; ค่อยๆเลื่อนเคอร์เซอร์ไปจนถึง ‘;’ ที่เป็นตัวปิดประโยคของบรรทัด i.toolbar_Basic นะครับ จากนั้นแทรกโค้ดสำหรับแสดงแถบเครื่องมือที่เราต้องการ ดังตัวอย่างต่อไปนี้ครับ i.toolbar_Custom=[[‘Bold’, ‘Italic’, ‘Underline’, ‘-‘, ‘Subscript’, ‘Superscript’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘-‘, ‘Link’, ‘Unlink’], [‘Outdent’, ‘Indent’, ‘-‘, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’], ‘/’, [‘Image’, ‘Flash’, ‘Smiley’, ‘-‘, ‘Table’, ‘HorizontalRule’, ‘SpecialChar’]]; แล้วบันทึกไฟล์ให้เรียบร้อย

2. ที่หน้าออกแบบ
<asp:TextBox runat=”server” ID=”txbEditor1″ Width=”500″ Height=”200″ TextMode=”MultiLine” />
<script type=”text/javascript” language=”javascript”>
CKEDITOR.replace(‘txbEditor1’, {
toolbar: ‘Custom’
});
</script>
บันทึกและทดลองรันดู จะได้ผลเหมือนกับวิธีที่ 1 แต่ด้วยวิธีนี้เราไม่ต้องคอยกำหนดแถบเครื่องมือให้กับ editor ของเราในหน้าออกแบบทุกๆ ครั้ง

หากต้องการกำหนดให้ Custom toolbar ที่เราสร้างขึ้นเป็นค่าปริยายให้กับทุกๆ instance ของ editor ก็สามารถทำได้เช่นกันครับ โดย ค้นหาคำ “i.toolbar=’Full’;” ใน ckeditor.js ซึ่งค่าปริยายที่เขามีให้เราในตอนแรกเลยก็คือ i.toolbar=’Full’; เราก็เพียงแต่ เปลี่ยนเป็น i.toolbar=’Custom’; เท่านั้น จากนั้นก็บันทึกไฟล์ให้เรียบร้อย ต่อไปนี้เวลาที่เราสร้าง instance ของ editor ในหน้าออกแบบ เราก็ไม่จำเป็นจะต้องกำหนดชื่อของชุดแถบเครื่องมืออีกต่อไป เราสามารถเขียนสั้นๆได้ดังต่อไปนี้ครับ

<asp:TextBox runat=”server” ID=”txbEditor1″ Width=”500″ Height=”200″ TextMode=”MultiLine” />
<script type=”text/javascript” language=”javascript”>
CKEDITOR.replace(‘txbEditor1’);
</script>

วิธีที่ 3 วิธีนี้ง่ายกว่าวิธีที่ 2 เยอะครับ และผมก็อยากจะขอแนะนำวิธีนี้ด้วย เพราะว่าวิธีที่ 2 นั้นค่อนข้างจะเกรียนไปสักนิด และทำให้เกิดข้อผิดพลาดได้ง่ายมาก เนื่องจากโค้ด java script ในไฟล์ ckeditor.js นั้น (เข้าใจว่า)เป็นโค้ดที่ถูก compress แล้ว เป็น minification file ทำให้โค้ดมันติดกันเป็นพรืดไปหมด นอกจากนี้ชื่อตัวแปรต่าง ๆ ก็ถูกเปลี่ยน/ย่อให้สั้นลง ทำให้โด้ดอ่านได้ยากขึ้นมาก แต่เนื่องจากวิธีที่ 2 นั้น เป็นวิธีที่ผมเคยใช้เมื่อสมัยยังเป็น FCKEditor อยู่ครับ ก็เลยนำมาลงในบทความด้วย

สำหรับวิธีที่ 3 นี้ เราไม่จำเป็นต้องแก้ไขโค้ดของไฟล์ ckeditor.js ในการเพิ่มหรือแก้ไขแถบเครื่องมือแต่อย่างใด แต่เราจะเพิ่มรายการแถบเครื่องมือลงในไฟล์ config.js แทน ดังตัวอย่าง:
// ไฟล์ config.js
CKEDITOR.editorConfig = function(config) {
// Custom toolbar
config.toolbar_Custom =
[ [‘Bold’, ‘Italic’, ‘Underline’, ‘-‘, ‘Subscript’, ‘Superscript’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’],
[‘Outdent’, ‘Indent’, ‘-‘, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’], ‘/’,
[‘Image’, ‘Flash’, ‘Smiley’, ‘-‘, ‘Table’, ‘HorizontalRule’, ‘SpecialChar’] ];
// Minimum toolbar : for just only necessary usage
config.toolbar_Minimum =
[ [‘Source’], [‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’, ‘-‘, ‘About’] ];
};

เวลาเรียกใช้ในหน้าออกแบบ ก็ระบุชื่อแถบเครื่องมือที่เราต้องการใช้งาน เช่นเดียวกับตัวอย่างโค้ดที่หน้าออกแบบของวิธีที่ 2 ครับ

หากต้องการกำหนดให้ Custom toolbar ที่เราสร้างขึ้นเป็นค่าปริยายให้กับทุกๆ instance ของ editor ก็สามารถทำได้เช่นกันครับ โดยระบุชื่อชุดแถบเครื่องมือที่เราต้องการใช้งานเป็นแถบเครื่องมือปริยาย ใน config.js ได้เลย ดังตัวอย่าง:

// ไฟล์ config.js
CKEDITOR.editorConfig = function(config) {
// Custom toolbar
config.toolbar_Custom =
[ [‘Bold’, ‘Italic’, ‘Underline’, ‘-‘, ‘Subscript’, ‘Superscript’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’],
[‘Outdent’, ‘Indent’, ‘-‘, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’], ‘/’,
[‘Image’, ‘Flash’, ‘Smiley’, ‘-‘, ‘Table’, ‘HorizontalRule’, ‘SpecialChar’] ];
// Minimum toolbar : for just only necessary usage
config.toolbar_Minimum =
[ [‘Source’], [‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’, ‘-‘, ‘About’] ];

config.toolbar = ‘Custom’;
};

ส่วนการเรียกใช้ในหน้าออกแบบก็เพียงแค่ใช้สคริปต์ <script type=”text/javascript” language=”javascript”>CKEDITOR.replace(‘txbEditor1’);</script> เท่านั้นเองครับ

ผมขอจบเนื้อหาของบทความครั้งนี้แต่เพียงเท่านี้ครับ สำหรับคราวหน้าเราจะมาปรับแต่งรูปสื่ออารมณ์กันครับ

อ่านบทความย้อนหลัง
มาปรับแต่ง CKEditor ให้โดนใจกันเถอะ ตอนที่ 1 เริ่มต้นใช้งาน

6 comments

  1. ไม่ชัวร์ครับ ยังไม่ได้ลองกับหน้าที่มีมาสเตอร์เพจเลย แต่เดาว่าน่าจะแก้แค่ที่ ID ของ TextBox Control ให้เป็น TextBox1.ClientId แค่นั้น แต่กับ ASP.NET Ajax นี่ … ไม่แน่ใจเหมือนกัน อาจจะแก้เยอะนิดส์นึง

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s