Con Filament 4 è arrivata una delle novità più attese dagli sviluppatori Laravel: il nuovo Rich Text Editor basato su Tiptap, che sostituisce definitivamente il vecchio editor integrato Trix. Si tratta di un aggiornamento importante, perché introduce un’esperienza di scrittura completamente rinnovata, più potente, personalizzabile e vicina agli standard moderni del web editing.
In questo articolo ti racconto cosa cambia, perché questo aggiornamento è così interessante per chi utilizza Filament e — soprattutto — ti lascio il link al video tutorial in cui ti mostro come installare, configurare e usare il nuovo Rich Editor in un progetto Laravel Filament.
🔍 Che cos’è il Rich Editor di Filament 4
Il Rich Editor di Filament 4 è stato completamente riscritto e ora utilizza Tiptap Editor, una libreria moderna basata su ProseMirror. Questo significa che puoi finalmente dire addio al vecchio editor Trix e godere di un’esperienza molto più fluida, con supporto a:
- formattazione avanzata (grassetto, corsivo, sottolineato, titoli, elenchi)
- blocchi personalizzati (code block, immagini, tabelle, griglie)
- toolbar configurabile e fluttuante (floating toolbar)
- supporto nativo alla renderizzazione HTML dei contenuti
Tiptap è già molto diffuso in ecosistemi come Vue.js, React e Next.js, e ora grazie a Filament possiamo usarlo anche in progetti Laravel senza dover scrivere integrazioni personalizzate.
💡 Perché passare da Trix a Tiptap
Il vecchio Trix Editor, presente nelle versioni precedenti di Filament, era funzionale ma limitato. Non permetteva una vera personalizzazione della toolbar, non gestiva blocchi complessi e mancava di estensioni modulari.
Con Tiptap, invece, tutto cambia: puoi trasformare l’editor in un vero page builder dinamico, aggiungere pulsanti personalizzati, blocchi di codice o persino integrare elementi drag-and-drop per la creazione di contenuti complessi, come newsletter o pagine web.
Nel video mostro un esempio pratico: la realizzazione di un piccolo gestionale DEM (Digital Email Marketing) in cui scriviamo e inviamo email formattate usando il nuovo editor. Un’ottima occasione per capire come gestire testi HTML, placeholder e contenuti dinamici in modo elegante e nativo con Filament.
⚙️ Come usare il nuovo Rich Editor in Filament 4
L’uso è semplicissimo. Ti basta sostituire nel tuo form builder il vecchio componente:
Textarea::make('content')
con:
RichEditor::make('content')
Da qui puoi partire per personalizzare la toolbar, aggiungere pulsanti, blocchi e persino le floating toolbar, che appaiono solo quando selezioni un determinato elemento del testo.
Nel video ti mostro passo dopo passo l’implementazione e il codice completo, spiegando anche come renderizzare correttamente il contenuto HTML utilizzando la classe RichContent::render().
🎬 Guarda il video tutorial completo
Se vuoi vedere in azione tutte queste funzionalità, dai un’occhiata al mio video su YouTube:
👉 Il nuovo Rich Editor di Filament 4 con Tiptap – Guida completa
Nel video troverai:
- un esempio pratico con codice reale
- la configurazione di Mailpit per testare l’invio delle email
- come attivare e personalizzare le toolbar statiche e fluttuanti
- e tanti consigli per sfruttare al massimo Filament 4 nel tuo progetto Laravel.
🧭 Conclusione
Il passaggio da Trix a Tiptap rappresenta un enorme passo avanti per chi sviluppa con Filament. Non è solo un miglioramento estetico, ma un vero upgrade di produttività e flessibilità. Con poche righe di codice puoi ottenere un editor professionale, moderno e completamente integrato con il tuo backend Laravel.
👉 Guarda subito il video completo e scopri come implementarlo nel tuo progetto! 🎥 Clicca qui per vedere il tutorial su YouTube