itOffside
การใช้งาน CKEditor (Text Editor WYSIWYG) และการตั้งค่าแบบง่ายๆ
jquery
CKEditor คือ เครื่องมือ(Tool) ที่ช่วยให้ผู้ใช้งานสามารถเขียนข้อความลงบนเว็บไซต์ได้อย่างสะดวกสบายโดยที่ผู้ใช้ไม่จำเป็นต้องเขียนแท๊ก code ภาษา HTML ใดๆเลย ยกตัวอย่างเช่น กล่อง Comment หรือกล่องเขียนบทความ บนเว็บ ถ้าเราไม่ใช้ CKEditor จะได้ กล่องเป็น Text Area พิมพ์ข้อความลงไปไม่สามารถใส่สี ขนาดตัวอักษร ใดๆได้(ยกเว้นมีความรู้เกี่ยวกับภาษา HTML) ดังนั้น CKEditor จะช่วยเหลือในการที่เราสามารถ ใส่สี ใส่ขนาดตัวอักษร ใส่ลิงค์ ตัวหน้า ตัวเอียงได้โดย เหมือนกับใช้ Microsoft Word เลยทีเดียว
วิธีการติดตั้ง
- ดาวน์โหลด Source code CKEditor ได้ที่เว็บไซต์ http://ckeditor.com/download โดยให้เราเลือกแบบ Full Package (ความแตกต่างของการดาวน์โหลดคือจะมีส่วนเสริมมาเยอะกว่า)
- แตกไฟล์และ นำ Source code ที่ได้ไปวางไว้ในโปรเจคของเรา
- เรียกไฟล์ javascript ของ ckeditor ตัวอย่างบทความของผมจะเป็นแบบนี้ครับ <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
- การเรียกใช้งาน สามารถทำได้โดย กำหนด id ของ textarea เป็นชื่ออะไรก็ได้ ตัวอย่างบทความ ชื่อ id คือ detail แล้วนำโค๊ดนี้ไปวางไว้ด้านล่าง textarea ตามตัวอย่างโค๊ดนี้ครับ
<textarea name="detail" id="detail"></textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace('detail');
function CKupdate() {
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
}
</script>แล้วลองดูตัวอย่าง กันครับ จะได้ผลลัพธ์ออกมาเป็นแบบนี้
แต่ยังไม่จบนะครับ เพราะเรายังจะต้องตั้งค่าต่างๆ เช่นเราไม่ต้องการให้ผู้ใช้ ใส่ตัวอักษรหนา หรือ ไม่ต้องการให้ผู้ใช้ ใส่รูปภาพ ตรงนี้ก็สามารถทำได้เช่นกัน วิธีการตั้งค่าสำหรับบทความนี้จะสอนในส่วนที่จำเป็นต้องใช้ ให้เราสามารถนำไปประยุกต์ใช้กันครับ
เข้าไปที่ โฟล์เดอร์ ckeditor แล้ว หาคำว่า "config.js" ให้เปิดไฟล์นี้มาครับ
ไฟล์นี้จะเป็นไฟล์ที่กำหนดค่าแล้วจะเป็นทุกๆ การใช้งาน ckeditor นะครับ
ต้องการกำหนดให้เวลา กด enter ให้เคาะบรรทัดใหม่ไม่ใช้ขึ้นบรรทัดใหม่ โดยความแตกต่างจะอยู่ที่ระยะห่างระหว่างบรรทัดครับ ลองดูตัวอย่าง code
config.enterMode = CKEDITOR.ENTER_DIV;ต้องการแสดงเครื่องมือบางอย่าง ลองดู code ครับ
config.toolbarGroups = [
{name: 'clipboard', groups: ['clipboard', 'undo']},
{name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{name: 'links'},
{name: 'insert'},
{name: 'forms'},
{name: 'tools'},
{name: 'document', groups: ['mode', 'document', 'doctools']},
{name: 'others'},
'/',
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
{name: 'styles'},
{name: 'colors'},
{name: 'about'}
];ดูผลลัพธ์ที่ได้นะครับ
บทความนี้เป็นตัวอย่างคร่าวๆ ที่เสนอการติดตั้งและการตั้งค่า ให้เป็นแนวทางไปประยุกต์ใช้งานต่อ หากต้องการศึกษาและกำหนดรายละเอียดที่ลึกซึ่งขึ้นสามารถเข้าไปดูได้ที่เว็บหลักของ Ckeditor ได้ที่ คลิกเพื่อไป doc ckeditor
ดาวน์โหลด Source code ตัวอย่างที่ผมทำประกอบบทความ ได้ที่ คลิกที่นี้เพื่อดาวน์โหลด
สำหรับบทความนี้ มีเพียงเท่านี้ หากมีข้อสงสัย comment ไว้ด้านล่างครับ...
แชร์บทความนี้
โปรแกรมเมอร์
ความเห็น (12)