Summernote

Summernote

แนะนำ WYSIWYG Editor ตัวฟรีที่ความสามารถไม่ธรรมดา

WYSIWYG Editor เป็นเครื่องมือสำหรับใช้จัดรูปแบบข้อความภายในเว็บไซต์ ซึ่งปัจจุบันนี้มีหลายตัวมาก เช่น https://imperavi.com/redactor/, https://www.froala.com/wysiwyg-editor เครื่องมีพวกนี้มีข้อที่ตรงที่ทำให้เราสามารถจัดข้อความภายในเว็บไซต์ได้ง่ายมาก ไม่ต้องมีความรู้เรื่อง HTML เราก็สามารถเพิ่มภาพ จัดเรียงตัวอักษร ปรับขนาดตัวอักษร ใส่สีได้อย่างง่ายดาย แล้วทำไมต้องแนะนำ Summernote ล่ะ เพราะอย่างแรกเลยคือมันฟรี ถ้าเทียบกับตัวอื่นในท้องตลาดเช่น redactor, froala แล้วจะพบว่ามันมีราคาสูงมาก แล้วนอกจากนั้นมันยังสามารถใส่ภาพหรือแนบไฟล์ได้เหมือนกับตัวอื่นๆที่กล่าวมาเช่นกัน มาดูหน้าตาของ summernote ที่เรากล่าวถึงกัน


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


เมื่อเราคลิกที่ปุ่มแนบภาพจะมีหน้าต่างขึ้นมาดังภาพด้านบน จะเห็นว่าเราสามารถแทรกเป็นลิงก์ภาพหรือแนบไฟล์ภาพได้ทันที ถ้าสักเกตดูจะพบว่าหน้าตาของ summernote นั้นปุ่มทั้งหลายคล้ายกับ bootstrap เป็นอย่างมาก เพราะว่า summernote นั้นใช้ bootstrap เป็นพื้นฐานนั่นเอง ดังนั้นของดีของมันคือเราสามารถปรับเปลี่ยนหน้าตาของ summernote ได้ตาม theme ของ bootstrap ที่เปลี่ยนไปได้

ข้อดีข้อต่อไปคือสามารถปรับตำแหน่งของปุ่มทั้งหลาย เลือกที่จะแสดงหรือไม่แสดงได้ง่ายมากโดยปรับเปลี่ยนโค้ดเพียงเล็กน้อยเท่านั้น ดังตัวอย่างด้านล่างเป็นตัวอย่างโค้ดแสดงปุ่มแบบมาตราฐานของ summernote

$('#summernote').summernote({
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
});

สำหรับคนที่ไม่เคยลองแนะนำเลยครับ SummerNote ลองโหลดมาใช้ดูครับเป็นของฟรีที่มีความสามารถครบถ้วนครับ http://summernote.org/


เลื่อนขึ้นด้านบน