Skip to main content

วิธีติดตั้ง CKEditor Templates สำหรับสร้างแม่แบบในช่องเนื้อหา ใน Drupal 9

โจทย์เริ่มต้นมีอยู่ว่า ต้องการสร้าง DIV สำหรับล้อมกรอบเนื้อหาสรุปก่อนเริ่มบทความ ในเว็บไซต์ที่ใช้ Drupal 9

ซึ่ง Drupal 9 นั้นติดตั้ง CKEditor รวมมาอยู่ใน Core อยู่แล้วไม่ต้องลงเพิ่ม (มีมาตั้งแต่ Drupal 8) แต่ด้วยข้อจำกัดบางประการทำให้ CKEditor ที่มากับ Drupal 9 ไม่มีคำสั่ง DIV ที่สามารถกำหนด CSS class ได้เอง มาให้ใช้แบบที่มีใน Drupal 7

การปรับใช้ HTML Textbox ใน Drupal 7 ร่วมกับ WYSIWYG และ CKEditor จัดตำแหน่งย่อหน้า และปุ่มเลือกสีตัวอักษร

เป็นที่ทราบกันดีว่า โปรแกรม Drupal ตั้งแต่ในอดีต มาจนถึงเวอร์ชั่น 7 นั้นมีข้อจำกัดเรื่องกล่องข้อความ (เนื้อหา) Textbox ที่ไม่มีเครื่องมืออำนวยความสะดวกในการจัดการความสวยงามของเนื้อหา โดยค่าเริ่มต้นของ Drupal 7 ก็ยังคงเป็นกล่องว่างๆ พร้อมสำหรับพิมพ์ Plain Text เท่านั้น และหากต้องการปรับแต่งความสวยงามของเนื้อหา ผู้ใช้จำเป็นต้องมีความรู้เกี่ยวกับคำสั่ง HTML และ CSS พอสมควร

poakpong Sun, 2017-05-21 - 13:54
Move to FCKeditor
ได้ยินชื่อของ FCKeditor เมื่อไม่นานมานี้ หลังจากได้ลองเล่นและหาข้อมูลเกี่ยวกับ drupal โดยก่อนหน้านี้ใช้งาน HTML text editor ที่ชื่อว่า TinyMCE ซึ่งทำงานคล้ายกัน แต่ FCKeditor เหมือนจะจัดการไฟล์อัพโหลดได้ง่ายกว่า หน้าตาของ FCKeditor แบบ full function FCKeditor หน้าตาของ TinyMCE แบบ full function tinymce FCKeditor คือชุดโค้ดที่ช่วยให้เราพิมพ์ข้อความในช่อง <textarea> แบบ WYSIWYG คือ แสดงผลได้อย่างที่เราต้องการ โดยไม่จำเป็นต้องรู้ภาษา HTML เลยก็ได้ ที่กล่าวว่าจัดการไฟล์ได้ง่ายกว่า TinyMCE เพราะ FCKeditor ว่ามีระบบ upload, browse มาให้พร้อม ส่วน TinyMCE จะต้องเอาตัวใช้ตัวช่วยคือ MCImageManager และ MCFileManager ซึ่งทั้งสองอันไม่ฟรี (TinyMCE และ FCKeditor เป็นโอเพ่นซอร์ซ) แถบเครื่องมือ Upload ใน FCKeditor fckeditor upload ผมได้ทดลองเอา FCKeditor ตามติดตั้งใน poakpong.com แทน TinyMCE ที่ใช้อยู่ก่อน โดยวิธีการติดตั้งก็อ่านได้จากเว็บไซต์ http://docs.fckeditor.net มีบอกไว้ละเอียดพอสมควร หรือจะอ่านจาก clinicaestet.ro/FCKeditor/_docs ก็ได้ (เหมือนจะอ่านง่ายกว่า) สิ่งที่ผมปรับแต่งใช้เอง เช่น - ลดจำนวน Toolbar ให้เหลือเฉพาะที่ใช้งานประจำ (รายละเอียด Configuration/Toolbar) - ปรับขนาดช่อง <textarea> ให้พอดีกับเวลาแสดงผลหน้าเว็บ (ดัดแปลงจากกระทู้นี้ .. FCKeditor .. Toolbox textarea) - ปิดฟังก์ชั่น browse server ให้เหลือแต่ upload อย่างเดียว เพื่อความรวดเร็ว (รายละเอียด Configuration/Built in File Browser และ ImageUpload) ปรับแต่งแล้วจะได้หน้าตาประมาณนี้ :P my fckeditor ปล. ไฟล์ทั้งหมดของ FCKeditor มีขนาดใหญ่กว่า TinyMCE สองเท่า แต่รู้สึกว่า FCKeditor จะโหลดได้เร็วกว่า
poakpong Sat, 2008-09-20 - 00:38
Javascript HTML WYSIWYG editor
ก่อนหน้านี้เคยได้เอาโค้ด javascript ที่เป็นช่องสำหรับพิมพ์ข้อความ "JS-RichEdit" มาใช้อยู่ก่อนหน้านี้ แต่ด้วยความไม่พอใจในสิ่งที่มี อิอิ...
poakpong Wed, 2006-11-01 - 22:58
Subscribe to WYSIWYG