CKEditor 5 in Drupal
Drupal 10 ha adottato CKEditor 5 come editor di default per i campi testo formattato. CKEditor 4, ormai end-of-life, e' stato rimosso dal core in Drupal 11. CKEditor 5 e' un'editor moderno, scritto in TypeScript, con un'architettura plugin completamente nuova e capacità collaborative real-time.
Configurazione dei text format
L'editor si configura per ogni text format in /admin/config/content/formats. Per ciascun formato (Basic HTML, Full HTML, Restricted HTML) si scelgono i bottoni della toolbar, drag-and-drop dalla riserva nascosti a visibili. La toolbar e' organizzata in gruppi separati da spaziatori e supporta wrap automatico.
Filtro HTML restrittivo
I tag HTML permessi sono dichiarati nel filtro Limit allowed HTML tags. CKEditor 5 calcola automaticamente i tag richiesti dai plugin abilitati e li aggiunge alla lista, evitando incongruenze. E' possibile aggiungere tag custom (es. <div class="callout">) per stili semantici.
Plugin essenziali
Plugin core utili includono:
- Source editing: modifica raw HTML (attenzione a usare solo per formati admin)
- Code block: blocchi di codice con highlight di sintassi
- Media library: integrazione con Drupal Media
- Table: tabelle responsive con caption, header, alignment
- Link: link interni con autocomplete sui contenuti
Stili custom (Styles dropdown)
Per offrire classi CSS predefinite agli editor si attiva il plugin Styles e si configurano elementi e classi:
Lead paragraph|p.lead Callout box|div.callout Button primary|a.btn.btn-primary
Gli elementi diventano selezionabili dal dropdown Styles nella toolbar.
Heading levels
Per default CKEditor 5 espone H2-H6 (H1 e' riservato al titolo della pagina per SEO). E' configurabile per format: editoriali e blog tipicamente usano H2-H4, technical docs anche H5-H6.
Image upload e Media
L'upload diretto si attiva tramite il modulo Image (Image upload) con destinazione e dimensioni max. Per asset riutilizzabili e' preferibile Media Library con il plugin Drupal media embed, che inserisce reference invece di file diretti.
Embed di contenuti
Plugin contrib popolari: ckeditor5_embedded_content per oEmbed (YouTube, Vimeo, Twitter), linkit per link interni con autocomplete potenziato.
Tema editor
L'editor in pagina può applicare il CSS del tema frontend (WYSIWYG fedele) impostando il file ckeditor5-stylesheets nel theme.info.yml. Importante per coerenza tra preview e pubblicato.
Hai bisogno di aiuto?
Se vuoi un sito Drupal performante dal team di G Tech Group, scrivici tramite il modulo di contatto.