CKEditor เป็น battle-tested WYSIWYG HTML editor ตัวหนึ่งที่ช่วยให้ผู้ใช้งานสามารถเขียนข้อความรูปแบบ HTML ลงใน <textarea> โดยไม่จำเป็นต้องเขียน Code HTML ใดๆ ยกตัวอย่างเช่น ช่องที่ไว้พิมพ์ Comment หรือช่องที่ไว้พิมพ์ข้อความต่างๆ บนเว็บ ถ้าเราไม่ใช้ CKEditor ช่องข้อความ หรือ <textarea> จะไม่สามารถใส่สี หรือ ขนาดตัวอักษรได้ (ยกเว้นผู้ใช้งานจะมีความรู้เกี่ยวกับภาษา HTML) มาดูรูปตัวอย่างที่ใช้งาน CKEditor กันครับ

CKEditor

ในปัจจุบัน CKEditor มีเวอร์ชั่น 4 และ 5 ให้เลือกใช้งาน มีความแตกต่างกันอยู่ที่ tools โดยเวอร์ชั่น 5 จะออกแบบให้ใช้งานง่ายขึ้น และรูปแบบดูสวยงามกว่า ที่เห็นเด่นชัดเลยจะเป็นเมนูสร้างตารางครับ โดยทั้งสองเวอร์ชั่นยังรองรับโครงสร้าง Bootstrap ด้วยเช่นกัน ในบทความนี้ผมขอพูดถึง CKEditor 4 นะครับเพราะเคยใช้งานมาก่อน

การติดตั้ง CKEditor 4 ให้รองรับ Bootstrap

ถ้าเราดาวโหลด ckeditor ตามปรกติจะไม่สามารถใช้งาน Bootstrap ได้ ดังนั้นจึงต้องดาวโหลดแบบติดตั้ง Add-ons วิธีการให้ดูตามรายละเอียดข้างล่างนี้ครับ

1.ไปที่ https://ckeditor.com/cke4/builder จากนั้นเลือกรูปแบบที่ต้องการ *แนะนำให้เลือกแบบ Standard

ckeditor

2. เลื่อนลงมาหัวห้อ Select your plugins and skin ตรงช่อง Search ให้พิมคำว่า bootstrap ครับ

CKEditor

3. เราจะเห็น plugins bootstrap แสดงขึ้นมา ให้ select มาฝั่งซ้ายทั้งหมดครับ

bootstrap

เมื่อ select หมดแล้วจะเหมือนรูปด้านล่าง

bootstrap

4. เลือนลงมาหัวข้อ Available skins และเลือก skin ที่ต้องการ

CKEditor

5. เลือนลงมาหัวข้อ Finalize and download เราสามารถเลือกภาษาไทยได้จากตรงนี้ครับ แต่ส่วนตัวคิดว่าใช้ภาษาอังกิตดีกว่านะ

CKEditor

6. จากนั้นติ๊กที่ I agree และเลือก Optimized และกดปุ่ม Download CKEditor 4.10.0
เพื่อเริ่มดาวโหลดไฟล์ครับ

CKEditor

7. แตกไฟล์ zip ที่ได้ลงในหน้าแรกของไฟล์เว็บไซต์ ตัวอย่างเช่น /web/yourdomain.com/public_html/ เมื่อแตกไฟล์เรียบร้อยจะเห็นโฟเดอร์ ckeditor ขึ้นมาครับ

8. จากนั้นใส่ code <script src=”ckeditor/ckeditor.js”></script> ภายใต้ของ <head> ปรกติจะอยู่ใน index.php หรือ header.php ครับ

9. ต่อไปเป็นการผูก <textarea> เข้ากับ ckeditor โดยใช้ id ของ <textarea> เป็นตัวเชื่อมครับ ดูตัวอย่าง code ตามด้านล่าง


จะเห็นว่า <textarea> มี id=”description” อยู่และ ตรง CKEDITOR.replace จะต้องใส่ ‘description‘ ด้วย ต่อไปส่วนของ toolbar: จะเป็นตัวกำหนดว่าจะให้แสดงเครื่องมืออะไรบ้าง เราสามารถที่จะใส่ // เพื่อปิดเครื่องมือที่ไม่ต้องการออกเช่น

//{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },

เป็นต้น

และนี่คือรูปตัวอย่างเมื่อติดตั้งเสร็จ ckeditor เรียบร้อย

ckeditor

เป็นยังไงบ้างสวยงามน่าใช้ไหมละครับ ^ ^”

เพิ่มเติมอีกนิด

การใช้ ckeditor จะไม่สามารถใช้ code reset ข้อความใน <textarea> ได้ตามปรกติ เช่น

<button type="reset">Reset</button>

ดังนั้นจำเป็นต้องใช้ jquery เข้ามาช่วย ตามตัวอย่าง code ด้านล่างครับ

<script type="text/javascript">
$(document).ready(function() {
$('#reset').on('click', function() {
CKEDITOR.instances.description.setData('');
});});
</script>

<button type="reset" id="reset">Reset</button>

จบแล้วครับสำหรับบทความ การติดตั้ง CKEditor 4 ให้รองรับ Bootstrap หวังว่าเพื่อนๆคงจะทำกันได้ติดขัดตรงไหนสอบถามไว้ตรงคอมเม้นได้เลยครับ อ่ออย่าลืมกดปุ่มติดตาม, like และ share บทความให้ด้วยนะครับ ^ ^

LEAVE A REPLY

Please enter your comment!
Please enter your name here