Fai risaltare il tuo Drupal 9 CKEditor - 7 moduli utili che non sapevi esistessero

Pubblicato: 2021-12-06

L'editor di contenuti è fondamentalmente la funzione più cruciale di un CMS. E con un potente come CKEditor come strumento di modifica rich text predefinito, Drupal ha notevolmente migliorato il suo gioco di gestione dei contenuti con diverse nuove funzionalità per Drupal 8/9 come il sistema di widget CKEditor e l'Advanced Content Filter (ACF). Quindi, sì, è piuttosto potente anche con le funzionalità predefinite... Ma puoi davvero migliorare il tuo gioco CKEditor con l'aiuto di alcuni moduli e plug-in forniti. Continua a leggere per ottenere la nostra opinione sui componenti aggiuntivi migliori e più interessanti per estendere le funzionalità e l'usabilità di CKEditor.

Il Drupal 9 CKEditor

Innanzitutto, per coloro che non conoscono Drupal, CKEditor 4.5 è l'editor WYSIWYG predefinito (Quello che vedi è ciò che ottieni) in Drupal 8/9. È un editor di testo che aiuta gli amministratori di siti Web a scrivere e modificare i contenuti direttamente nelle pagine Web. Come Drupal, CKEditor è un progetto open source ed è stato recentemente aggiornato con molte nuove potenti funzionalità che continueranno a essere migliorate. Come parte dell'iniziativa di preparazione di Drupal 10, i contributori di Drupal stanno lavorando per implementare la versione più recente e moderna - CKEditor 5 - in Drupal 10.

Ora che abbiamo le basi, passiamo agli aggiornamenti!

Estendere CKEditor con questi fantastici moduli Drupal 9

1. CKEditor Leggi di più

Hai presente quelle volte in cui vuoi dare al lettore la possibilità di vedere il resto di una grande quantità di testo? Questo è il tuo spunto per utilizzare la funzione Leggi di più di CKEditor, che invita i tuoi utenti a "continuare a leggere" pur dando alla tua pagina un layout compatto. Per aggiungerlo, Drupal 9 fornisce un modo semplice e facile per abilitare la funzionalità Leggi di più / Mostra meno una volta installato il modulo contributore.

Implementazione del modulo:

Una volta installato questo modulo, dovrai configurare alcune impostazioni:

Modifica il formato di testo preferito e abilita "Limita tag HTML consentiti".
Aggiungi <div data-readmore-less-text data-readmore-more-text data-readmore-type class=" ckeditor-readmore"> in "Tag HTML consentiti". Disabilita il "Limita tag HTML consentiti" e premi Salva.
Ora trascina e rilascia l'icona "Leggi di più" dai pulsanti disponibili alla barra degli strumenti attiva (come mostrato nell'immagine sopra) e premi Salva.
Dopo aver svuotato la cache troverai l'icona " Leggi di più " nell'editor di testo quando scegli il "Formato di testo preferito".

Come usarlo:

All'interno dell'area del contenuto, fare clic sull'icona " Formato testo ". Ora otterrai una scatola rettangolare. Aggiungi il resto del contenuto che desideri mostrare dopo che l'utente ha fatto clic su Leggi di più.

FAQ: Posso modificare il testo Leggi di più?

Assolutamente! Basta fare clic sulla scheda "Pulsante Leggi di più" in "Impostazioni plug-in CKEditor" e modificare il testo.

2. Pulsante colore CKEditor

Per impostazione predefinita, CKEditor non ti offre la possibilità di cambiare il colore del testo dall'interno dell'editor. Ma se vuoi cambiare il colore di un testo specifico o anche evidenziare il testo con colori diversi, il modulo Drupal 9 CKEditor Color Button dovrebbe essere nella tua lista. Si noti che questo modulo richiede l'installazione anche del modulo dei pulsanti del pannello ed entrambi questi moduli richiedono l'installazione delle librerie, della libreria dei pulsanti dei colori e dei pulsanti del pannello. Dopo aver installato i moduli e aggiunto le librerie nella cartella delle librerie del tema, possiamo spostare il pulsante dei colori da Pulsanti disponibili a Barra degli strumenti attiva nel formato di testo preferito.

FAQ: Posso aggiungere un colore personalizzato?

Sì! Se non desideri utilizzare nessuno dei colori predefiniti già disponibili, puoi anche impostare un colore personalizzato. Puoi farlo nella sezione "Formato editor di testo" da cui hai attivato le opzioni di colore. Trova il "pulsante Colore CKEditor" nella sezione "Impostazioni plug-in CKEditor" di "Formato editor di testo" e aggiungi il colore nell'area di testo "Colori testo" separato da virgole e senza il segno #.

3. CKEditor Youtube

Il modulo Youtube di Drupal 9 CKEditor ti aiuta ad aggiungere video di Youtube ai tuoi contenuti senza un lungo codice di incorporamento. Dopo aver installato e spostato il modulo dell'icona di Youtube dai pulsanti disponibili alla barra degli strumenti attiva, puoi trovare le icone di Youtube nell'editor di testo nel formato di testo preferito. Questo modulo dipende dalla libreria.

Una delle cose migliori di questo modulo è la flessibilità. Come mostrato nello screenshot sopra, puoi "Incollare il codice di incorporamento" o incollare un URL di Youtube specificando la larghezza e l'altezza. Inoltre hai opzioni utili come "Riproduzione automatica", "Inizia alle (ora specifica)" e "Mostra i controlli del giocatore".

4. Modelli CKEditor e interfaccia utente dei modelli CKEditor

Hai molti contenuti della stessa struttura per le pagine o i post del tuo sito web? I moduli di interfaccia utente CKEditor Templates e CKEditor Templates sono il tuo biglietto per una facile duplicazione. Entrambi i moduli dipendono da librerie che possono essere scaricate e installate come indicato nelle pagine del modulo. Dopo aver installato queste librerie, puoi spostare l'icona del modello dai pulsanti disponibili alla barra degli strumenti attiva come mostrato nell'immagine sottostante.

Il modulo Modelli CKEditor fornisce una finestra di dialogo con modelli predefiniti. Quando fai clic sull'icona del modello (come mostrato nello screenshot qui sopra) vedrai un popup aperto che sceglierai uno dei tuoi modelli predefiniti. Il modello verrà quindi inserito con "formato testo e stili" che sono inclusi.

Il modulo dell'interfaccia utente dei modelli di CKEditor è ciò che usi per creare i modelli da cui scegli nel modulo Modelli di CKEditor . Dopo aver abilitato il modulo, troverai un'opzione nella sezione Config > Content Authoring > CKEditor Templates .

Quando fai clic su Modelli di CKEditor dalla configurazione, verrai reindirizzato alla pagina dei modelli di configurazione di CKEditor . Ora puoi aggiungere o modificare modelli.

5. CKEditor CodeSnippet

Utilizzando il modulo CodeSnippet di CKEditor, puoi aggiungere il tuo "contenuto del codice" all'interno del contenuto in modo che sia evidenziato e ben formattato. Questo modulo utilizza la libreria highlight-js e tutti gli stili disponibili per essa. L'installazione di questo modulo utilizzando il compositore installerà automaticamente la libreria. Dopo aver installato questo modulo, puoi spostare l'icona "frammento di codice" dal pulsante Disponibile alla barra degli strumenti attiva.

Ora troverai la scheda Snippet di codice nelle impostazioni del plugin CKEditor del formato testo. Qui puoi selezionare/deselezionare i linguaggi di programmazione supportati.

FAQ: Come usarlo?

Una volta installato il modulo, puoi inserire la funzione CodeSnippet nei tuoi contenuti da CKEditor. Quando fai clic sull'icona del frammento di codice, verrà visualizzato un popup. Qui puoi incollare il tuo codice e selezionare la lingua del codice.

6. Conteggio parole di CKEditor

Quindi stai lavorando con un limite di parole/caratteri... Questa è una situazione comune nei siti altamente stilizzati con layout dinamici. E quelli possono diventare particolarmente disordinati con più mani che lavorano sullo stesso contenuto. In questi casi è utile vedere il numero di caratteri e parole direttamente nel tuo CKEditor nel piè di pagina dell'editor stesso (proprio come faresti in MS Word). In quel momento installeresti il modulo CKEditor Wordcount. Dopo aver installato il modulo e la libreria, puoi trovare "conteggio parole e conteggio caratteri" nelle impostazioni del plug- in CKEditor del formato testo. Qui puoi selezionare/deselezionare le funzionalità in base alle tue esigenze. Troverai anche un contatore in CKEditor nella parte in basso a destra di esso.

7. Testo twittabile CKEditor

Stai cercando di guadagnare alcuni punti internet? Utilizzando il modulo Tweetable Text di CKEditor, puoi dare la possibilità ai tuoi utenti di twittare un particolare pezzo di testo facendo clic su una parola o una sintassi. Basta installare il modulo e la libreria come indicato nella pagina del modulo e spostare l'icona del testo twittabile dal pulsante Disponibile alla barra degli strumenti attiva. Troverai quindi un'icona tweet nell'editor di testo. Quando fai clic su questa icona, si aprirà un popup. Qui puoi aggiungere un testo visualizzato (per quale parola/e vuoi aggiungere l'icona del tweet) e un testo twittabile (il testo che apparirà nel tweet). Quando un utente fa clic su Visualizza testo , verrà reindirizzato a Twitter e verrà visualizzato il testo twittabile .