Faceți-vă Drupal 9 CKEditor să apară - 7 module utile despre care nu știați că există

Publicat: 2021-12-06

Editorul de conținut este practic cea mai importantă funcție a unui CMS. Și având o putere precum CKEditor ca instrument implicit de editare a textului îmbogățit, Drupal și-a îmbunătățit considerabil jocul de gestionare a conținutului cu câteva funcții noi pentru Drupal 8/9, cum ar fi sistemul de widget-uri CKEditor și Filtrul avansat de conținut (ACF). Deci, da, este destul de puternic chiar și cu caracteristicile implicite... Dar vă puteți îmbunătăți jocul CKEditor cu ajutorul unor module și pluginuri contribuite. Citiți mai departe pentru a obține părerea noastră despre cele mai bune și mai interesante suplimente pentru a extinde caracteristicile și capacitatea de utilizare ale CKEditor.

Editorul CKE Drupal 9

În primul rând, pentru cei noi în Drupal, CKEditor 4.5 este editorul bogat WYSIWYG (Ceea ce vedeți este ceea ce obțineți) implicit în Drupal 8/9. Este un editor de text care îi ajută pe administratorii site-urilor web să scrie și să editeze conținut direct în paginile web. La fel ca Drupal, CKEditor este un proiect open source și a fost recent actualizat cu multe funcții noi puternice care vor continua să fie îmbunătățite. Ca parte a inițiativei de pregătire pentru Drupal 10, colaboratorii Drupal lucrează la implementarea celei mai recente și mai moderne versiuni - CKEditor 5 - în Drupal 10.

Acum că avem elementele de bază din drum, să trecem la upgrade-uri!

Drupa 9 CKEditor

Extinderea CKEditor cu aceste fantastice module Drupal 9

1. CKEditor Citiți mai multe

Știți acele momente în care doriți să oferiți cititorului posibilitatea de a vedea restul unei cantități mari de text? Acesta este indicația dvs. pentru a utiliza funcția CKEditor Citiți mai multe, care vă invită utilizatorii să „citească în continuare”, oferind în continuare paginii dvs. un aspect compact. Pentru a-l adăuga, Drupal 9 oferă o modalitate simplă și ușoară de a activa funcționalitatea Citiți mai mult / Afișați mai puțin odată ce instalați modulul contributor.

CK

Implementarea modulului:

Odată ce instalați acest modul, va trebui să configurați câteva setări:

  1. Editați formatul de text preferat și activați „Limitați etichetele HTML permise”.
  2. Adăugați <div data-readmore-less-text data-readmore-more-text data-readmore-type class=" ckeditor-readmore"> în „Etichete HTML permise”. Dezactivați „Limitați etichetele HTML permise” și apăsați pe Salvare.
  3. Acum trageți și plasați pictograma „Citiți mai multe” din Butoanele disponibile în bara de instrumente activă (așa cum se arată în imaginea de mai sus) și apăsați pe Salvare.
  4. După ce ștergeți memoria cache, veți găsi pictograma „ Citiți mai multe ” în editorul de text când alegeți „Formatul de text preferat”.

Cum să-l folosească:

În zona de conținut, faceți clic pe pictograma „ Format text ”. Acum veți obține o cutie dreptunghiulară. Adăugați restul conținutului pe care doriți să-l afișați după ce utilizatorul face clic pe Citiți mai multe.


Întrebări frecvente: Pot modifica textul Citiți mai multe?

Absolut! Pur și simplu faceți clic pe fila „Buton Citește mai multe” din „Setări plugin CKEditor” și modificați textul.

2. Butonul de culoare CKEditor

În mod implicit, CKEditor nu vă oferă posibilitatea de a schimba culoarea textului din editor. Dar dacă ați dorit să schimbați culoarea unui anumit text sau chiar să evidențiați textul cu culori diferite, modulul Drupal 9 CKEditor Color Button ar trebui să fie pe lista dvs. Rețineți că acest modul necesită instalarea și modulul butonului Panel și ambele module necesită instalarea bibliotecilor, a bibliotecii de butoane de culoare și a bibliotecii de butoane a panoului. După instalarea modulelor și adăugarea bibliotecilor în folderul biblioteci al temei, putem muta butonul de culori din Butoanele disponibile în bara de instrumente Active în formatul de text preferat.

Întrebări frecvente: Pot adăuga o culoare personalizată?

Da! Dacă nu doriți să utilizați nici una dintre culorile implicite deja disponibile, puteți seta și o culoare personalizată. Puteți face acest lucru în secțiunea „Format editor de text” de unde ați activat opțiunile de culoare. Găsiți „butonul CKEditor Color” în secțiunea „CKEditor plugins setting” din „Text editors format” și adăugați culoare în zona de text „Text colors” separat prin virgulă și fără semnul #.

3. CKEditor Youtube

Modulul Youtube Drupal 9 CKEditor vă ajută să adăugați videoclipuri Youtube în conținutul dvs. fără un cod de încorporare lung. După instalarea și mutarea formularului de pictogramă Youtube din Butoanele disponibile în bara de instrumente activă, puteți găsi pictograme Youtube în editorul de text în formatul de text preferat. Acest modul depinde de bibliotecă.

CKEditor youtube

Unul dintre cele mai bune lucruri despre acest modul este flexibilitatea. După cum se arată în captura de ecran de mai sus, puteți să „Lipiți codul de încorporare” sau să lipiți o adresă URL YouTube în timp ce specificați lățimea și înălțimea. De asemenea, aveți opțiuni la îndemână precum „Redare automată”, „Începe la (ora specifică)” și „Afișați comenzile jucătorului”.

4. CKEditor Templates & CKEditor Templates Interfață utilizator

Aveți o mare parte din aceeași structură de conținut pentru paginile sau postările site-ului dvs.? Modulele CKEditor Templates și CKEditor Templates User Interface reprezintă biletul pentru o duplicare ușoară. Ambele module depind de bibliotecile care pot fi descărcate și instalate conform instrucțiunilor din paginile modulelor. După instalarea acestor biblioteci, puteți muta pictograma șablon din Butoanele disponibile în bara de instrumente activă, așa cum se arată în imaginea de mai jos.

Modulul CKEditor Templates oferă o fereastră de dialog pop-up cu șabloane predefinite. Când faceți clic pe pictograma șablon (așa cum se arată în captura de ecran de mai sus), veți vedea un pop-up deschis, veți alege oricare dintre șabloanele dvs. predefinite. Șablonul va fi apoi inserat cu „format și stiluri de text” care sunt incluse.

Modulul CKEditor Templates User Interface este ceea ce utilizați pentru a crea șabloanele din care alegeți în modulul CKEditor Templates . După activarea modulului, veți găsi o opțiune în secțiunea Configurare > Creare conținut > Șabloane CKEditor .

Când faceți clic pe Șabloane CKEditor din configurație, veți fi redirecționat către pagina șabloane de configurare CKEditor . Acum puteți adăuga sau edita șabloane.

5. CKEditor CodeSnippet

Folosind modulul CKEditor CodeSnippet, puteți adăuga „conținutul codului” în conținut, astfel încât acesta să fie evidențiat și bine formatat. Acest modul folosește biblioteca highlight-js și toate stilurile disponibile pentru el. Instalarea acestui modul folosind Composer va instala automat biblioteca. După instalarea acestui modul, puteți muta pictograma „fragment de cod” din butonul Disponibil în bara de instrumente activă.

Acum veți găsi fila Fragment de cod în setările pluginului CKEditor de format text. Aici puteți verifica/debifa limbajele de programare acceptate.

Fragment de cod

Întrebări frecvente: Cum se utilizează?

Odată ce instalați modulul, puteți introduce caracteristica CodeSnippet în conținutul dvs. din CKEditor. Când faceți clic pe pictograma Fragment de cod, veți primi o fereastră pop-up. Aici, puteți să lipiți codul și să selectați limba codului.

6. CKEditor Număr de cuvinte

Deci lucrați cu o limită de cuvinte/caractere... Aceasta este o situație comună în site-urile extrem de stilizate, cu aspect dinamic. Și acestea pot deveni deosebit de dezordonate cu mai multe mâini care lucrează la același conținut. În aceste cazuri, este util să vedeți numărul de caractere și cuvinte chiar în editorul dvs. CKE în subsolul editorului însuși (la fel cum ați face în MS Word). Atunci ai instala modulul CKEditor Wordcount. După instalarea modulului și a bibliotecii, puteți găsi „numărul de cuvinte și numărul de caractere” în setările pluginului CKEditor de format text. Aici, puteți verifica/debifa funcțiile în funcție de cerințele dvs. Veți găsi, de asemenea, un contor în CKEditor în partea din dreapta jos a acestuia.

Număr de cuvinte

7. CKEditor Tweetable Text

Încercați să obțineți câteva puncte de internet? Folosind modulul CKEditor Tweetable Text, puteți oferi utilizatorilor opțiunea de a tweet o anumită bucată de text făcând clic pe un cuvânt sau pe o sintaxă. Doar instalați modulul și biblioteca conform instrucțiunilor din pagina modulului și mutați pictograma text care poate fi tweetat de pe butonul Disponibil în bara de instrumente activă. Veți găsi apoi o pictogramă tweet în editorul de text. Când faceți clic pe această pictogramă, se va deschide o fereastră pop-up. Aici, puteți adăuga un text de afișare (pentru care cuvânt (cuvintele) doriți să adăugați pictograma tweet) și Textul Tweetable (textul care va apărea în Tweet). Când un utilizator face clic pe Display Text, acesta va fi redirecționat către Twitter și va fi afișat Tweetable Text .

CKEditor Tweetable Text