สร้าง Drupal 9 CKEditor Pop ของคุณ - 7 โมดูลที่มีประโยชน์ที่คุณไม่รู้ว่ามีอยู่

โปรแกรมแก้ไขเนื้อหานั้นเป็นหน้าที่ที่สำคัญที่สุดของ CMS และด้วยขุมพลังอย่าง CKEditor ที่เป็นเครื่องมือแก้ไข Rich Text เริ่มต้น Drupal ได้ยกระดับเกมการจัดการเนื้อหาอย่างมากด้วยฟีเจอร์ใหม่ๆ มากมายสำหรับ Drupal 8/9 เช่น ระบบวิดเจ็ต CKEditor และ Advanced Content Filter (ACF) ใช่ มันค่อนข้างทรงพลังแม้ในฟีเจอร์เริ่มต้น… แต่คุณสามารถเพิ่มเกม CKEditor ของคุณได้ด้วยความช่วยเหลือจากโมดูลและปลั๊กอินที่สนับสนุน อ่านต่อไปเพื่อรับส่วนเสริมที่ดีที่สุดและน่าสนใจที่สุดของเราเพื่อขยายคุณสมบัติและการใช้งานของ CKEditor

Drupal 9 CKEditor

ก่อนอื่นสำหรับผู้ที่เพิ่งเริ่มใช้ Drupal CKEditor 4.5 คือตัวแก้ไข WYSIWYG (สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ) เริ่มต้นใน Drupal 8/9 เป็นโปรแกรมแก้ไขข้อความที่ช่วยให้ผู้ดูแลเว็บไซต์เขียนและแก้ไขเนื้อหาในหน้าเว็บได้โดยตรง เช่นเดียวกับ Drupal CKEditor เป็นโครงการโอเพ่นซอร์สและเพิ่งได้รับการอัปเกรดด้วยคุณสมบัติใหม่อันทรงพลังมากมายที่จะดำเนินการปรับปรุงต่อไป ในฐานะที่เป็นส่วนหนึ่งของความคิดริเริ่มความพร้อมของ Drupal 10 ผู้มีส่วนร่วมของ Drupal กำลังทำงานเพื่อปรับใช้เวอร์ชันล่าสุดและทันสมัยที่สุด - CKEditor 5 - ใน Drupal 10

ตอนนี้เรามีพื้นฐานหมดแล้ว มาอัปเกรดกัน!

ขยาย CKEditor ด้วยโมดูล Drupal 9 ที่ยอดเยี่ยมเหล่านี้

1. CKEditor อ่านเพิ่มเติม

คุณรู้จักช่วงเวลาเหล่านั้นเมื่อคุณต้องการให้ผู้อ่านเลือกดูข้อความที่เหลือจำนวนมากหรือไม่? นั่นคือสัญญาณของคุณที่จะใช้คุณลักษณะ CKEditor Read More ซึ่งจะเชิญชวนผู้ใช้ของคุณให้ "อ่านต่อ" ในขณะที่ยังคงให้เค้าโครงหน้าเว็บของคุณมีขนาดกะทัดรัด หากต้องการเพิ่ม Drupal 9 ให้วิธีที่ง่ายและสะดวกในการเปิดใช้งานฟังก์ชัน Read More / Show Less เมื่อคุณติดตั้งโมดูลผู้ร่วมให้ข้อมูล

การนำโมดูลไปใช้:

เมื่อคุณติดตั้งโมดูลนี้ คุณจะต้องกำหนดการตั้งค่าบางอย่าง:

1. แก้ไขรูปแบบข้อความที่ต้องการและเปิดใช้งาน "จำกัดแท็ก HTML ที่อนุญาต"
2. เพิ่ม <div data-readmore-less-text data-readmore-more-text data-readmore-type class=" ckeditor-readmore"> ใน “แท็ก HTML ที่อนุญาต” ปิดใช้งาน "จำกัดแท็ก HTML ที่อนุญาต" แล้วกดบันทึก
3. ตอนนี้ลากและวางไอคอน "อ่านเพิ่มเติม" จากปุ่มที่มีให้ไปยังแถบเครื่องมือที่ใช้งานอยู่ (ดังแสดงในภาพด้านบน) แล้วกดบันทึก
4. หลังจากล้างแคช คุณจะพบไอคอน “ อ่านเพิ่มเติม ” ในโปรแกรมแก้ไขข้อความ เมื่อคุณเลือก “รูปแบบข้อความที่ต้องการ”

วิธีใช้งาน:

ภายในพื้นที่เนื้อหา ให้คลิกที่ไอคอน " รูปแบบข้อความ " ตอนนี้คุณจะได้กล่องสี่เหลี่ยม เพิ่มเนื้อหาที่เหลือที่คุณต้องการแสดงหลังจากที่ผู้ใช้คลิกอ่านเพิ่มเติม

FAQ : ฉันสามารถแก้ไขข้อความ Read More ได้หรือไม่?

อย่างแน่นอน! เพียงคลิกที่แท็บ "ปุ่มอ่านเพิ่มเติม" ใน "การตั้งค่าปลั๊กอิน CKEditor" และเปลี่ยนข้อความ

2. ปุ่มสี CKEditor

ตามค่าเริ่มต้น CKEditor ไม่ได้เสนอตัวเลือกให้คุณเปลี่ยนสีข้อความจากภายในตัวแก้ไข แต่ถ้าคุณต้องการเปลี่ยนสีของข้อความเฉพาะ หรือแม้แต่เน้นข้อความด้วยสีต่างๆ โมดูล Drupal 9 CKEditor Color Button ควรอยู่ในรายการของคุณ โปรดทราบว่าโมดูลนี้จำเป็นต้องติดตั้งโมดูลปุ่มแผงควบคุมด้วย และโมดูลทั้งสองนี้ต้องการไลบรารี ไลบรารีปุ่มสี และไลบรารีปุ่มแผงควบคุมเพื่อติดตั้ง หลังจากติดตั้งโมดูลและเพิ่มไลบรารีในโฟลเดอร์ไลบรารีของธีมแล้ว เราสามารถย้ายปุ่มสีจากปุ่มที่พร้อมใช้งานไปยังแถบเครื่องมือที่ใช้งานอยู่ในรูปแบบข้อความที่ต้องการได้

คำถามที่พบบ่อย: ฉันสามารถเพิ่มสีที่กำหนดเองได้หรือไม่?

ใช่! หากคุณไม่ต้องการใช้สีเริ่มต้นที่มีอยู่แล้ว คุณสามารถตั้งค่าสีที่กำหนดเองได้เช่นกัน คุณสามารถทำได้ในส่วน "รูปแบบตัวแก้ไขข้อความ" ที่คุณเปิดใช้งานตัวเลือกสี ค้นหา "ปุ่มสี CKEditor" ในส่วน "การตั้งค่าปลั๊กอิน CKEditor" ของ "รูปแบบตัวแก้ไขข้อความ" และเพิ่มสีใน "สีข้อความ" ที่คั่นด้วยเครื่องหมายจุลภาคและไม่มีเครื่องหมาย #

3. CKEditor Youtube

โมดูล Youtube ของ Drupal 9 CKEditor ช่วยให้คุณเพิ่มวิดีโอ Youtube ลงในเนื้อหาของคุณได้โดยไม่ต้องมีโค้ดฝังยาว หลังจากติดตั้งและย้ายแบบฟอร์มไอคอน Youtube จากปุ่มที่มีให้ไปยังแถบเครื่องมือที่ใช้งานอยู่ คุณจะพบไอคอน Youtube ในตัวแก้ไขข้อความในรูปแบบข้อความที่ต้องการ โมดูลนี้ขึ้นอยู่กับห้องสมุด

หนึ่งในสิ่งที่ดีที่สุดเกี่ยวกับโมดูลนี้คือความยืดหยุ่น ดังที่แสดงในภาพหน้าจอด้านบน คุณสามารถ "วางโค้ดสำหรับฝัง" หรือวาง URL ของ Youtube ในขณะที่ระบุความกว้างและความสูงได้ นอกจากนี้คุณยังมีตัวเลือกที่มีประโยชน์เช่น "เล่นอัตโนมัติ" "เริ่มในเวลาที่กำหนด" และ "แสดงการควบคุมผู้เล่น"

4. เทมเพลต CKEditor และ อินเทอร์เฟซผู้ใช้เทมเพลต CKEditor

มีโครงสร้างเนื้อหาเหมือนกันสำหรับหน้าเว็บไซต์หรือโพสต์ของคุณหรือไม่? โมดูลอินเทอร์เฟซผู้ใช้เทมเพลต CKEditor และเทมเพลต CKEditor เป็นตั๋วให้คุณทำซ้ำได้ง่าย ทั้งสองโมดูลขึ้นอยู่กับไลบรารีที่สามารถดาวน์โหลดและติดตั้งได้ตามคำแนะนำในหน้าโมดูล หลังจากติดตั้งไลบรารีเหล่านี้ คุณสามารถย้ายไอคอนเทมเพลตจากปุ่มที่พร้อมใช้งานไปยังแถบเครื่องมือที่ใช้งานอยู่ดังแสดงในภาพด้านล่าง

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

โมดูล ส่วนต่อประสานผู้ใช้เทมเพลต CKEditor คือสิ่งที่คุณใช้เพื่อสร้างเทมเพลตที่คุณเลือกในโมดูล เทมเพลต CKEditor หลังจากเปิดใช้งานโมดูล คุณจะพบตัวเลือกในส่วน Config > Content Authoring > CKEditor Templates

เมื่อคุณคลิก เทมเพลต CKEditor จากการกำหนดค่า คุณจะถูกเปลี่ยนเส้นทางไปยังหน้า เทมเพลตการกำหนดค่า CKEditor ตอนนี้คุณสามารถเพิ่มหรือแก้ไขเทมเพลตได้

5. CKEditor CodeSnippet

การใช้โมดูล CKEditor CodeSnippet คุณสามารถเพิ่ม "เนื้อหาโค้ด" ของคุณภายในเนื้อหาเพื่อให้ไฮไลต์และจัดรูปแบบได้ดี โมดูลนี้ใช้ไลบรารี highlight-js และสไตล์ที่มีอยู่ทั้งหมด การติดตั้งโมดูลนี้โดยใช้ผู้แต่งจะติดตั้งไลบรารีโดยอัตโนมัติ หลังจากติดตั้งโมดูลนี้ คุณสามารถย้ายไอคอน "ข้อมูลโค้ด" จากปุ่มที่พร้อมใช้งานไปยังแถบเครื่องมือที่ใช้งานอยู่

ตอนนี้ คุณจะพบแท็บ ข้อมูลโค้ด ในการ ตั้งค่าปลั๊กอิน CKEditor ของรูปแบบข้อความ คุณสามารถตรวจสอบ/ยกเลิกการเลือกภาษาโปรแกรมที่รองรับได้ที่นี่

คำถามที่พบบ่อย: วิธีการใช้งาน?

เมื่อคุณติดตั้งโมดูลแล้ว คุณสามารถแทรกคุณสมบัติ CodeSnippet ในเนื้อหาของคุณจาก CKEditor เมื่อคุณคลิกที่ไอคอนข้อมูลโค้ด คุณจะได้รับป๊อปอัป ที่นี่ คุณสามารถวางโค้ดและเลือกภาษาของโค้ดได้

6. CKEditor จำนวนคำ

คุณกำลังทำงานกับขีดจำกัดของคำ/อักขระ... นี่เป็นสถานการณ์ทั่วไปในไซต์ที่มีสไตล์สูงพร้อมเลย์เอาต์แบบไดนามิก และสิ่งเหล่านี้อาจดูยุ่งเหยิงเป็นพิเศษด้วยการใช้หลายมือทำงานบนเนื้อหาเดียวกัน ในกรณีเหล่านี้ การดูจำนวนอักขระและคำใน CKEditor ในส่วนท้ายของตัวแก้ไขจะเป็นประโยชน์ (เช่นเดียวกับที่คุณทำใน MS Word) นั่นคือเวลาที่คุณจะติดตั้งโมดูล CKEditor Wordcount หลังจากติดตั้งโมดูลและไลบรารี คุณจะพบ "จำนวนคำและจำนวนอักขระ" ใน การตั้งค่าปลั๊กอิน CKEditor ของรูปแบบข้อความ ที่นี่ คุณสามารถตรวจสอบ/ยกเลิกการเลือกคุณสมบัติได้ตามความต้องการของคุณ คุณจะพบตัวนับใน CKEditor ที่ด้านล่างขวาของตัวนับ

7. CKEditor ข้อความทวีต

กำลังพยายามทำคะแนนอินเทอร์เน็ตอยู่หรือไม่? การใช้โมดูล CKEditor Tweetable Text คุณสามารถให้ตัวเลือกแก่ผู้ใช้ในการทวีตข้อความบางข้อความโดยคลิกที่คำหรือไวยากรณ์ เพียงติดตั้งโมดูลและไลบรารีตามคำแนะนำในหน้าโมดูล และย้ายไอคอน ข้อความที่ทวีตได้ จากปุ่มที่พร้อมใช้งานไปยังแถบเครื่องมือที่ใช้งานอยู่ จากนั้นคุณจะพบไอคอนทวีตในโปรแกรมแก้ไขข้อความ เมื่อคุณคลิกที่ไอคอนนี้ ป๊อปอัปจะเปิดขึ้น ที่นี่ คุณสามารถเพิ่ม ข้อความที่แสดง (สำหรับคำที่คุณต้องการเพิ่มไอคอนทวีต) และ ข้อความที่ ทวีตได้ (ข้อความที่จะปรากฏในทวีต) เมื่อผู้ใช้คลิกที่ Display Text ระบบจะเปลี่ยนเส้นทางไปที่ Twitter และ ข้อความที่ทวีต ได้จะปรากฏขึ้น