การใช้งาน CKEditor (Text Editor WYSIWYG) และการตั้งค่าแบบง่ายๆ

Share Button

CKEditor คือ เครื่องมือ(Tool)  ที่ช่วยให้ผู้ใช้งานสามารถเขียนข้อความลงบนเว็บไซต์ได้อย่างสะดวกสบายโดยที่ผู้ใช้ไม่จำเป็นต้องเขียนแท๊ก code ภาษา HTML ใดๆเลย ยกตัวอย่างเช่น กล่อง Comment หรือกล่องเขียนบทความ บนเว็บ ถ้าเราไม่ใช้ CKEditor จะได้ กล่องเป็น Text Area พิมพ์ข้อความลงไปไม่สามารถใส่สี ขนาดตัวอักษร ใดๆได้(ยกเว้นมีความรู้เกี่ยวกับภาษา HTML) ดังนั้น CKEditor จะช่วยเหลือในการที่เราสามารถ ใส่สี ใส่ขนาดตัวอักษร ใส่ลิงค์ ตัวหน้า ตัวเอียงได้โดย เหมือนกับใช้ Microsoft Word เลยทีเดียว

วิธีการติดตั้ง

  1. ดาวน์โหลด Source code CKEditor ได้ที่เว็บไซต์ http://ckeditor.com/download โดยให้เราเลือกแบบ Full Package (ความแตกต่างของการดาวน์โหลดคือจะมีส่วนเสริมมาเยอะกว่า)
  2. แตกไฟล์และ นำ Source code ที่ได้ไปวางไว้ในโปรเจคของเรา
  3. เรียกไฟล์ javascript ของ ckeditor ตัวอย่างบทความของผมจะเป็นแบบนี้ครับ <script type=”text/javascript” src=”ckeditor/ckeditor.js”></script>
  4. การเรียกใช้งาน สามารถทำได้โดย กำหนด id ของ textarea เป็นชื่ออะไรก็ได้ ตัวอย่างบทความ ชื่อ id คือ detail แล้วนำโค๊ดนี้ไปวางไว้ด้านล่าง textarea ตามตัวอย่างโค๊ดนี้ครับ

แล้วลองดูตัวอย่าง กันครับ จะได้ผลลัพธ์ออกมาเป็นแบบนี้

ตัวอย่างการติดตั้ง ckeditor
ตัวอย่างการติดตั้ง ckeditor

แต่ยังไม่จบนะครับ เพราะเรายังจะต้องตั้งค่าต่างๆ เช่นเราไม่ต้องการให้ผู้ใช้ ใส่ตัวอักษรหนา หรือ ไม่ต้องการให้ผู้ใช้ ใส่รูปภาพ ตรงนี้ก็สามารถทำได้เช่นกัน วิธีการตั้งค่าสำหรับบทความนี้จะสอนในส่วนที่จำเป็นต้องใช้ ให้เราสามารถนำไปประยุกต์ใช้กันครับ

เข้าไปที่ โฟล์เดอร์ ckeditor แล้ว หาคำว่า “config.js” ให้เปิดไฟล์นี้มาครับ
ไฟล์นี้จะเป็นไฟล์ที่กำหนดค่าแล้วจะเป็นทุกๆ การใช้งาน ckeditor นะครับ

ต้องการกำหนดให้เวลา กด enter ให้เคาะบรรทัดใหม่ไม่ใช้ขึ้นบรรทัดใหม่ โดยความแตกต่างจะอยู่ที่ระยะห่างระหว่างบรรทัดครับ ลองดูตัวอย่าง code

ต้องการแสดงเครื่องมือบางอย่าง ลองดู code ครับ

ดูผลลัพธ์ที่ได้นะครับ

การตั้งค่า ckeditor
การตั้งค่า ckeditor

บทความนี้เป็นตัวอย่างคร่าวๆ ที่เสนอการติดตั้งและการตั้งค่า ให้เป็นแนวทางไปประยุกต์ใช้งานต่อ หากต้องการศึกษาและกำหนดรายละเอียดที่ลึกซึ่งขึ้นสามารถเข้าไปดูได้ที่เว็บหลักของ Ckeditor ได้ที่ คลิกเพื่อไป doc ckeditor

ดาวน์โหลด Source code ตัวอย่างที่ผมทำประกอบบทความ ได้ที่ คลิกที่นี้เพื่อดาวน์โหลด

สำหรับบทความนี้ มีเพียงเท่านี้ หากมีข้อสงสัย comment ไว้ด้านล่างครับ…

benext About benext
โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

Share Button

Published by

benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *