วิธีการติดตั้ง CKEditor & ปรับแต่งเครื่องมือตามต้องการ

หลายๆท่านคงจะเคยเห็น WYSIWYG Editor ที่ชื่อว่า CKEditor กันมาแล้ว จากการโพสข้อความ ตามเว็บไซต์ต่างๆ วันนี้ผมจะมาพูดถึงเรื่องวิธีการติดตั้ง ลงบนหน้าเว็บไซต์ รวมไปถึงการปรับแต่งเครื่องมือ ต่างๆของ CKEditor ตามความต้องการใช้งานของเรา....
ก่อนอื่นท่านก็ไป download ckeditor มาเตรียมพร้อมไว้ก่อน Download
จากนั้นก็แตกไฟล์ zip ออกมาก็จะได้โฟลเดอร์ CKEditor ให้นำไปไว้ใน root ของเว็บไซต์

วิธีติดตั้ง CKEditor มี 2 วิธี คือ
หนึ่ง config กลุ่มเครื่องมือของ CKEditor ลงไปบนหน้าเว็บไซต์ที่จะใช้งานนั้นๆโดยตรง
สอง config ลงไปในไฟล์ config.js ของ CKEditor แล้วค่อยเรียกใช้งานจากชื่อที่เราตั้งไว้เมื่อต้องการ

ก่อนที่จะพูดถึงวิธีติดตั้ง เรามาทำความรู้จักกับกลุ่มเครื่องมือของ CKEditor มีอะไรกันบ้าง

[] ระบุขอบเขตของกลุ่มเครื่องมือ
'-' ตัวคั่นระหว่างกลุ่มเครื่องมือ
'/' ขึ้นบรรทัดใหม่

กลุ่มเครื่องมือ สำหรับการแก้ไขเอกสาร
'Source' ดูรหัส html
'Save' บันทึก
'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" src=''/> เหลือเพียง <img src=''/>)
*/-----------------------------------------------------------------------------------------------------------------------\*

กลุ่มเครื่องมือสำหรับ การสร้างแบบฟอร์ม
'Form' แทรก แบบฟอร์มลงในเอกสาร
'Checkbox' แทรก check box ลงในแบบฟอร์มหรือเอกสาร
'Radio' แทรก radio button ลงในแบบฟอร์มหรือเอกสาร
'TextField' แทรก text input field ลงในแบบฟอร์มหรือเอกสาร
'Textarea' แทรก text area ลงในแบบฟอร์มหรือเอกสาร
'Select' แทรก list box ลงในแบบฟอร์มหรือเอกสาร
'Button' แทรกปุ่มลงในแบบฟอร์มหรือเอกสาร
'ImageButton' แทรกปุ่มแบบรูปภาพ ลงในแบบฟอร์มหรือเอกสาร
'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
*/-----------------------------------------------------------------------------------------------------------------------\*

skin รูปแบบหน้าตา
'kama'


'office2003'


'v2'


เมื่อเรารู้จักกลุ่มเครื่องมือของ ckeditor แล้วก็มาเลือกใช้งานกัน ก่อนอื่นให้ท่าน include ckeditor.js เข้ามาก่อน ไว้ระหว่าง tag <head></head> ดังนี้

view plainprint?

1. <script src="ckeditor/ckeditor.js" type="text/javascript"></script>  

วิธีที่1 config กลุ่มเครื่องมือของ CKEditor ลงไปบนหน้าเว็บไซต์โดยตรง มีรูปแบบดังนี้
สร้าง textarea ให้มี id='editor' สังเกตุดูตรงชื่อ id จะต้องตรงกัน โดยจะตั้งชื่ออะไรก็ได้

view plainprint?

1. <textarea cols="50" id="editor1" name="editor1" rows="10"></textarea>  
2.   
3.  <script type="text/javascript">  
4.   
5.  CKEDITOR.replace('editor1', {  
6.   
7.  skin   : 'kama', //กำหนดรูปแบบหน้าตา  
8.   
9.  height   : 200, //กำหนดความสูง  
10.   
11.  width    : 500,//กำหนดความกว้าง  
12.   
13.  toolbar:       //กลุ่มเครื่องมือ ตัดออก เพิ่มเข้าได้  
14.   
15.  [ ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript', '-',  
16.   
17.      'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],  
18.   
19.  ['Outdent', 'Indent', '-', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],  
20.   
21.  '/',  
22.   
23.  ['Image', 'Flash', 'Smiley', '-', 'Table', 'HorizontalRule', 'SpecialChar'] ]  
24.   
25.  });  
26.   
27.  </script>  

รูปตัวอย่าง


วิธีที่2 config ลงไปในไฟล์ config.js ของ CKEditor แล้วค่อยเรียกใช้งานจากชื่อที่เราตั้งไว้เมื่อต้องการ
ให้ท่านเปิดเข้าไปในโฟลเดอร์ ckeditor แล้วมองหาไฟล์ชื่อ config.js จากนั้นก็เปิดขึ้นมาจะได้แบบนี้

view plainprint?

1. CKEDITOR.editorConfig = function( config )  
2. {  
3.  ให้นำกลุ่มเครื่องมือของ ckeditor มาใส่ไว้ในนี้  
4. };  

ด้วยวิธีการตั้งชื่อ config.toolbar_ แล้วตามด้วยชื่อที่ท่านต้องการ ตามด้วยเครื่องหมาย =
เช่น config.toolbar_Myck =

ตัวอย่าง ผมจะใส่ไว้ 2 แบบ แบบแรกชื่อ Myck แบบที่สองชื่อ Minick

view plainprint?

1. CKEDITOR.editorConfig = function( config )  
2.   
3.  {  
4.   
5.  config.toolbar_Myck =  
6.   
7.  [ ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript', '-',  
8.   
9.      'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],  
10.   
11.  ['Outdent', 'Indent', '-', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],  
12.   
13.  '/',  
14.   
15.  ['Image', 'Flash', 'Smiley', '-', 'Table', 'HorizontalRule', 'SpecialChar'] ];  
16.   
17.    
18.   
19.  config.toolbar_Minick =  
20.   
21.  [ ['Bold', 'Italic', 'Underline', '-','NumberedList', 'BulletedList', 'Link',  
22.   
23.   '-','Outdent', 'Indent'], ['JustifyCenter', 'JustifyRight', 'JustifyBlock'],  
24.   
25.  ['Image', 'Smiley', '-', 'Table', 'HorizontalRule'] ];  
26.   
27.    
28.   
29.  };  

การเรียกใช้งาน

view plainprint?

1. <textarea cols="50" id="editor2" name="editor2" rows="10"></textarea>  
2.   
3.   
4. <script type="text/javascript">  
5.   
6.  CKEDITOR.replace('editor2', {  
7.   
8.  skin   : 'kama', //กำหนดรูปแบบหน้าตา  
9.   
10.  height   : 200, //กำหนดความสูง  
11.   
12.  width    : 500,//กำหนดความกว้าง  
13.   
14.  toolbar: 'Myck' //เรียกใช้งาน ckeditor จากไฟล์ config.js  
15.   
16.  });  
17.   
18.  </script>  

รูปตัวอย่าง

การเรียกใช้พร้อมกัน 2แบบ ในหน้าเดียวกันท่านจะต้องเปลี่ยน id ด้วย

view plainprint?

1. <textarea cols="50" id="editor3" name="editor3" rows="10"></textarea>  
2.   
3.  <script type="text/javascript">  
4.   
5.  CKEDITOR.replace('editor3', {  
6.   
7.  skin   : 'kama', //กำหนดรูปแบบหน้าตา  
8.   
9.  height   : 130, //กำหนดความสูง  
10.   
11.  width    : 350,//กำหนดความกว้าง  
12.   
13.  toolbar: 'Minick' //เรียกใช้งาน ckeditor จากไฟล์ config.js  
14.   
15.  });  
16.   
17.  </script>  

รูปตัวอย่าง

เพียงเท่านี้เราก็มี CKEditor เอาไว้ใช้งานทั้งการโพสข้อความ และการเขียนบทความแล้ว จบเพียงเท่านี้ครับ

ในบทต่อไปเราจะนำเอา CKEditor ไปใช้เขียนบทความแล้วบันทึกลงฐานข้อมูล(Database)พร้อมทั้งนำขึ้นมา
แสดงบนหน้าเว็บไซต์ครับ