Jadikan Drupal 9 CKEditor Anda Pop - 7 Modul Berguna yang Tidak Anda Ketahui Ada

Editor konten pada dasarnya adalah fungsi paling penting dari CMS. Dan dengan pembangkit tenaga listrik seperti CKEditor sebagai alat pengeditan teks kaya default, Drupal telah meningkatkan permainan manajemen kontennya secara signifikan dengan beberapa fitur baru untuk Drupal 8/9 seperti sistem widget CKEditor dan Filter Konten Lanjutan (ACF). Jadi, ya, ini cukup kuat bahkan dengan fitur default… Tetapi Anda benar-benar dapat meningkatkan permainan CKEditor Anda dengan bantuan beberapa modul dan plug-in yang dikontribusikan. Baca terus untuk mendapatkan pendapat kami tentang pengaya terbaik dan paling menarik untuk memperluas fitur dan kegunaan CKEditor.

Drupal 9 CKEditor

Pertama, bagi mereka yang baru mengenal Drupal, CKEditor 4.5 adalah editor kaya WYSIWYG (Apa yang Anda lihat adalah apa yang Anda dapatkan) default di Drupal 8/9. Ini adalah editor teks yang membantu admin situs web menulis dan mengedit konten langsung di halaman web. Seperti Drupal, CKEditor adalah proyek open source dan baru-baru ini telah ditingkatkan dengan banyak fitur baru yang kuat yang akan terus ditingkatkan. Sebagai bagian dari inisiatif kesiapan Drupal 10, kontributor Drupal bekerja untuk mengimplementasikan versi terbaru dan paling modern - CKEditor 5 - di Drupal 10.

Sekarang setelah kita memiliki dasar-dasarnya, mari masuk ke peningkatan!

Memperluas CKEditor dengan modul Drupal 9 yang fantastis ini

1. CKEditor Baca Selengkapnya

Anda tahu saat-saat ketika Anda ingin memberi pembaca pilihan untuk melihat sisa teks dalam jumlah besar? Itu isyarat Anda untuk menggunakan fitur CKEditor Read More, yang mengundang pengguna Anda untuk "membaca" sambil tetap memberikan halaman Anda tata letak yang ringkas. Untuk menambahkannya, Drupal 9 menyediakan cara sederhana dan mudah untuk mengaktifkan fungsi Read More / Show Less setelah Anda menginstal modul kontributor.

Menerapkan modul:

Setelah Anda menginstal modul ini, Anda perlu mengonfigurasi beberapa pengaturan:

1. Edit format Teks yang disukai dan aktifkan "Batasi tag HTML yang diizinkan".
2. Tambahkan <div data-readmore-less-text data-readmore-more-text data-readmore-type class=" ckeditor-readmore"> di “Tag HTML yang diizinkan ”. Nonaktifkan "Batasi tag HTML yang diizinkan" dan tekan simpan.
3. Sekarang seret dan lepas ikon "Baca lebih lanjut" dari tombol yang tersedia ke toolbar Aktif (seperti yang ditunjukkan pada gambar di atas) dan tekan simpan.
4. Setelah mengosongkan cache, Anda akan menemukan ikon " Baca Selengkapnya " di editor teks saat Anda memilih "format Teks Pilihan".

Bagaimana cara menggunakannya:

Di dalam area konten, klik ikon " Format teks ". Sekarang Anda akan mendapatkan kotak persegi panjang. Tambahkan sisa konten yang ingin Anda tampilkan setelah pengguna Anda mengklik Baca Selengkapnya.

FAQ : Dapatkah saya mengubah teks Read More?

Sangat! Cukup klik pada tab "Tombol Baca Selengkapnya" di "Pengaturan plugin CKEditor" dan ubah teksnya.

2. Tombol Warna CKEditor

Secara default, CKEditor tidak menawarkan Anda pilihan untuk mengubah warna teks dari dalam editor. Tetapi jika Anda memang ingin mengubah warna teks tertentu atau bahkan menyorot teks dengan warna berbeda, modul Tombol Warna Drupal 9 CKEditor harus ada dalam daftar Anda. Perhatikan bahwa modul ini memerlukan modul tombol Panel untuk diinstal juga dan kedua modul ini memerlukan pustaka, Pustaka Tombol Warna, dan pustaka Tombol Panel untuk diinstal. Setelah menginstal modul dan menambahkan perpustakaan di folder perpustakaan tema, kita dapat memindahkan tombol warna dari tombol Tersedia ke toolbar Aktif dalam format teks yang disukai.

FAQ: Dapatkah saya menambahkan warna khusus?

Ya! Jika Anda tidak ingin menggunakan warna default yang sudah tersedia, Anda juga dapat mengatur warna kustom. Anda dapat melakukan ini di bagian "Format editor teks" tempat Anda mengaktifkan opsi warna. Temukan "tombol Warna CKEditor" di bagian "Pengaturan plugin CKEditor" dari "Format editor teks" dan tambahkan warna di area teks "Warna teks" yang dipisahkan koma dan tanpa tanda #.

3. CKEditor Youtube

Modul Youtube Drupal 9 CKEditor membantu Anda menambahkan video Youtube ke konten Anda tanpa kode embed yang panjang. Setelah menginstal dan memindahkan formulir ikon Youtube dari tombol Tersedia ke toolbar Aktif, Anda dapat menemukan ikon Youtube di editor teks dalam format teks pilihan. Modul ini tergantung pada perpustakaan.

Salah satu hal terbaik tentang modul ini adalah fleksibilitasnya. Seperti yang ditunjukkan pada tangkapan layar di atas, Anda dapat "Menempelkan kode sematan" atau menempelkan URL Youtube sambil menentukan lebar dan tinggi. Anda juga memiliki opsi praktis seperti "Putar Otomatis", "Mulai pada (waktu tertentu)" dan "Tampilkan kontrol pemutar".

4. Template CKEditor & Antarmuka Pengguna Template CKEditor

Memiliki banyak struktur konten yang sama untuk halaman atau posting situs web Anda? Modul Antarmuka Pengguna Template CKEditor dan Template CKEditor adalah tiket Anda menuju duplikasi yang mudah. Kedua modul bergantung pada pustaka yang dapat diunduh dan diinstal seperti yang diinstruksikan di halaman modul. Setelah menginstal perpustakaan ini, Anda dapat memindahkan ikon template dari tombol Tersedia ke toolbar Aktif seperti yang ditunjukkan pada gambar di bawah ini.

Modul Template CKEditor menyediakan popup dialog dengan template yang telah ditentukan sebelumnya. Ketika Anda mengklik ikon template (seperti yang ditunjukkan pada tangkapan layar di atas), Anda akan melihat popup terbuka, Anda akan memilih salah satu template yang telah ditentukan sebelumnya. Template kemudian akan disisipkan dengan "format dan gaya teks" yang disertakan.

Modul Antarmuka Pengguna Template CKEditor adalah apa yang Anda gunakan untuk membuat template yang Anda pilih dari modul Template CKEditor . Setelah mengaktifkan modul, Anda akan menemukan opsi di bagian Config > Content Authoring > CKEditor Templates .

Ketika Anda mengklik Template CKEditor dari konfigurasi, Anda akan diarahkan ke halaman template konfigurasi CKEditor . Sekarang Anda dapat menambahkan atau mengedit template.

5. Cuplikan Kode CKEditor

Menggunakan modul CKEditor CodeSnippet, Anda dapat menambahkan "konten kode" Anda di dalam konten sehingga disorot dan diformat dengan baik. Modul ini menggunakan pustaka highlight-js dan semua gaya yang tersedia untuknya. Menginstal modul ini menggunakan komposer akan menginstal perpustakaan secara otomatis. Setelah menginstal modul ini, Anda dapat memindahkan ikon “cuplikan kode” dari tombol Tersedia ke toolbar Aktif.

Sekarang Anda akan menemukan tab Cuplikan Kode di pengaturan plugin CKEditor format teks. Di sini Anda dapat mencentang/menghapus centang bahasa pemrograman yang didukung.

FAQ: Bagaimana cara menggunakannya?

Setelah Anda menginstal modul, Anda dapat memasukkan fitur CodeSnippet di konten Anda dari CKEditor. Ketika Anda mengklik ikon Cuplikan Kode, Anda akan mendapatkan popup. Di sini, Anda dapat menempelkan kode Anda dan memilih bahasa kode.

6. Jumlah Kata CKEditor

Jadi Anda bekerja dengan batas kata/karakter… Ini adalah situasi umum di situs yang sangat bergaya dengan tata letak dinamis. Dan itu bisa menjadi sangat berantakan dengan banyak tangan yang mengerjakan konten yang sama. Dalam kasus ini, akan sangat membantu untuk melihat jumlah karakter dan kata tepat di CKEditor Anda di footer editor itu sendiri (seperti yang Anda lakukan di MS Word). Saat itulah Anda akan menginstal modul CKEditor Wordcount. Setelah menginstal modul dan perpustakaan, Anda dapat menemukan "jumlah kata dan jumlah karakter" di pengaturan plugin CKEditor format teks. Di sini, Anda dapat mencentang/menghapus centang fitur sesuai kebutuhan Anda. Anda juga akan menemukan penghitung di CKEditor di bagian kanan bawah.

7. Teks Tweetable CKEditor

Mencoba untuk mencetak beberapa poin internet? Dengan menggunakan modul Teks Tweetable CKEditor, Anda dapat memberikan opsi kepada pengguna Anda untuk men-tweet bagian teks tertentu dengan mengklik kata atau sintaks. Cukup instal modul dan pustaka seperti yang diinstruksikan di halaman modul dan pindahkan ikon teks yang dapat di - tweet dari tombol Tersedia ke toolbar Aktif. Anda kemudian akan menemukan ikon tweet di editor teks. Ketika Anda mengklik ikon ini, sebuah popup akan terbuka. Di sini, Anda dapat menambahkan Teks Tampilan (untuk kata mana Anda ingin menambahkan ikon tweet) dan Teks yang Dapat Di-Tweet (teks yang akan muncul di Tweet). Ketika pengguna mengklik Teks Tampilan maka itu akan dialihkan ke Twitter dan Teks yang Dapat Di-Tweet akan ditampilkan.