วิธีติดตั้ง Laravel-CKEditor

วิธีการติดตั้ง CKEditor-laravel นั้นไม่ยาก เพียงแค่ Run command และเพิ่ม id หรือ name ลงในไฟล์ Blade ก็สามารถใช้งาน CKEditor ในการเขียนข้อความ ปรับขนาดตัวอักษร ใส่ลิงก์ ใส่สี ตัวหนา ตัวเอียงได้เหมือนกับ Microsoft Word โดยที่ไม่ต้องเขียน code HTML หรือ Markdown ด้วยตัวเองครับ

#Classmethod Thailand

#Thai Language

#Laravel

#PHP

Tinnakorn Maneewong

2021.06.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

CKEditor คืออะไร

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

การติดตั้ง CKEditor Package

การแนะนำการติดตั้ง CKEditor Package ในครั้งนี้ ผมจะใช้เป็น Laravel 6 ครับ ขั้นตอนการติดตั้งจะมีดังนี้

1. ติดตั้งแพ็กเกจ CKEditor

ให้ Run command ตามนี้

composer require japonline/laravel-ckeditor

CKEditor-1

2. เพิ่ม ServiceProvider

สำหรับ Laravel 5.4 ให้เข้าไปที่ config/app.php เพื่อทำการเพิ่ม ServiceProvider ที่เตรียมไว้ให้ด้านล่าง หลังจากที่เข้ามาที่ไฟล์ app.php แล้ว ให้หาคำว่า providers และทำการเพิ่มโค้ดไว้ที่บรรทัดสุดท้ายเฉพาะภายใน array ที่ชื่อ providers

สำหรับ Laravel 5.5+ สามารถข้ามขั้นตอนการเพิ่ม ServiceProvider นี้ไปได้เลยครับ ซึ่งในตัวอย่างนี้ผมได้ใช้ Laravel 6 ในการติดตั้ง CKEditor และได้ข้ามขั้นตอนนี้ไปเหมือนกันครับ

Japonline\Ckeditor\ServiceProvider::class,

CKEditor-2

3. การทำ Publish the resources

ให้ Run command ตามนี้

php artisan vendor:publish --tag=ckeditor

CKEditor-3

4. การใช้งาน CKEditor

4.1 เพิ่ม Script ลงในไฟล์ Blade

<script src="/vendor/japonline/laravel-ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace('body_1-ckeditor');
    CKEDITOR.replace('body_2-ckeditor');
    CKEDITOR.replace('body_3-ckeditor');
</script>

ในส่วนของไฟล์ index.blade.php ให้ทำการวาง <script> ไว้ข้างบนคำว่า @endsection ที่อยู่ส่วนท้ายสุดของไฟล์ index.blade.php พร้อมตั้งชื่อใน replace ตามต้องการ ซึ่งในตัวอย่างนี้ผมจะใช้เป็นชื่อ 'body_1-ckeditor' นอกจากนี้เราสามารถเพิ่มโค้ด CKEDITOR.replace('your_name-ckeditor'); กี่บรรทัดก็ได้ เพื่อที่จะสามารถติดตั้ง CKEditor ได้หลายตำแหน่งตามที่ต้องการเหมือนกับตัวอย่างรูปภาพด้านล่าง CKEditor-4

4.2 เพิ่ม name หรือ id
ในส่วนของ <script> ให้นำชื่อ 'body_1-ckeditor' ไปใช้โดยนำไปใส่ในช่อง name หรือ id ของ textarea เพื่อที่จะทำให้ CKEditor สามารถใช้งานได้ ซึ่งในตัวอย่างตามรูปภาพด้านล่างนี้ผมใส่ชื่อ 'body_1-ckeditor' ใว้ที่ id ของ textarea ทั้งหมด 3 id CKEditor-5

4.3 ทดสอบ CKEditor
เปิดหน้าเว็บไซต์ของโปรเจกต์ CKEditor ขึ้นมา จะเห็นว่า CKEditor ได้แสดงขึ้นมาบนหน้าเว็บไซต์แล้ว จากนั้นทำการทดสอบโดยการใส่ข้อความอะไรลงไปก็ได้ แล้วลองปรับแต่งข้อความด้วยเครื่องมือของ CKEditor เพียงเท่านี้ก็สามารถใช้งาน CKEditor ได้แล้วครับ CKEditor-6