I migliori editor HTML WYSIWYG gratuiti per il web

La sigla sta per «what you see is what you get»: chi scrive vede il testo già formattato invece dei tag, e di solito può passare alla vista del codice sorgente per ritoccarlo. Lo trovi nei pannelli di amministrazione, nei CMS e ovunque una persona che non conosce l’HTML debba pubblicare qualcosa.

Nelle schermate si somigliano tutti; le differenze si vedono quando il progetto cresce.

Come si sceglie #

• Licenza. È il primo filtro. Alcune librerie sono passate da licenze permissive a licenze copyleft o commerciali: in un prodotto chiuso possono portarti obblighi che non avevi previsto.
• Peso. Un editor completo può superare qualche centinaio di kilobyte. Su un pannello interno non importa, su una pagina pubblica sì.
• Pulizia dell’HTML. La prova vera è quando qualcuno incolla un testo da Word: gli editor seri tolgono la formattazione inutile, gli altri la lasciano passare e riempiono il database di stili.
• Estendibilità. Caricamento immagini, menzioni, tabelle, modelli: controlla se la funzione che ti serve è inclusa o è un modulo a pagamento.
• Accessibilità e telefono. Si provano solo sul campo: alcuni editor su uno schermo piccolo diventano inutilizzabili.

Le opzioni principali #

CKEditor 5 #

È il più maturo del gruppo, e c’è da oltre vent’anni: modifica collaborativa in tempo reale, gestione avanzata delle immagini, tabelle complete, formule, controlli di accessibilità e un incolla da Word che funziona. Con l’architettura a plugin includi solo quello che ti serve.

La licenza è duplice: GPL 2 o successive per i progetti open source compatibili, oppure una licenza commerciale che toglie i vincoli del copyleft e sblocca le funzioni premium, come la collaborazione, l’esportazione in Word e in PDF e l’assistente basato sull’intelligenza artificiale.

Se il tuo prodotto è chiuso, ti serve la licenza commerciale. Dalla versione 44, a fine 2024, anche l’uso sotto GPL richiede di indicare una chiave di licenza ('GPL') nella configurazione.

TinyMCE #

Per anni è stato l’editor per eccellenza (era il motore del Classic Editor di WordPress), ed è ancora quello con più documentazione e integrazioni pronte. Da sapere: con la versione 7, nel 2024, è passato dalla licenza MIT alla GPL 2 o successive. Se l’avevi messo in un prodotto proprietario contando sui vecchi termini, controlla la tua situazione e, se serve, passa alla licenza commerciale.

Anche qui le funzioni più richieste dalle aziende sono a pagamento, a cominciare da PowerPaste, che pulisce il testo incollato da Word ed Excel. Resta una scelta solida, purché la licenza la guardi prima e non dopo.

Froala #

È commerciale fin dall’inizio, senza versione gratuita per la produzione, ma ha probabilmente l’interfaccia più piacevole del gruppo: barra degli strumenti che si adatta allo schermo, popup contestuali, tabelle eleganti e avvio rapidissimo. Se il budget c’è e conta l’esperienza di chi scrive, merita una prova.

Quill #

Leggero, con un’architettura pulita e un suo modello di documento (Delta) invece del semplice HTML. Dopo anni di pausa è uscita la versione 2.0 nel 2024, ed è molto usato nelle applicazioni moderne dove serve un editor prevedibile e facile da controllare da codice.

Non ha la ricchezza di CKEditor su tabelle e contenuti complessi, ma per commenti, descrizioni e testi di media lunghezza basta e avanza.

Tiptap e Lexical #

Sono i due nomi nuovi che molti sviluppatori scelgono oggi. Tiptap si appoggia a ProseMirror, ha un’ottima integrazione con React, Vue e gli altri framework e ti lascia costruire l’interfaccia che vuoi; la collaborazione e alcuni moduli sono a pagamento. Lexical è l’editor sviluppato da Meta, leggero e pensato soprattutto per React. Tutti e due richiedono più lavoro iniziale di un editor «chiavi in mano», perché la barra degli strumenti la costruisci tu.

Editor.js #

Funziona in modo diverso dagli altri: invece di produrre HTML, restituisce una struttura a blocchi in formato JSON. Ogni paragrafo, immagine o citazione è un blocco con i suoi dati.

È un vantaggio quando i contenuti vanno riusati in posti diversi, come sito, app e newsletter, perché la presentazione la decidi tu quando li mostri. È uno svantaggio se ti serve solo dell’HTML da salvare e mostrare.

Jodit, Trix e Summernote #

Jodit è scritto in TypeScript senza dipendenze e ha un buon rapporto fra peso e funzioni, compreso un piccolo editor per ritagliare e ridimensionare le immagini. È MIT, con una versione Pro a pagamento per il file manager avanzato e altre funzioni.

Trix nasce nel mondo Ruby on Rails, è volutamente minimale e produce markup molto pulito.

Summernote si appoggia a jQuery e Bootstrap e si configura in poche righe; la modalità Air nasconde la barra e mostra i pulsanti solo quando selezioni il testo. È la scelta rapida per un pannello interno, anche se gli aggiornamenti sono più lenti di quelli di CKEditor o TinyMCE.

Tre cose che si scoprono tardi #

L’HTML in arrivo va filtrato sul server. Nessun editor sostituisce questo passaggio: chiunque può mandare al tuo sito contenuti scritti a mano, saltando l’interfaccia. Serve una libreria di sanificazione sul server (per esempio HTML Purifier in PHP o DOMPurify con Node), altrimenti permetti a qualcuno di eseguire codice nel browser degli altri visitatori.

Il caricamento delle immagini di solito non è incluso. L’editor ti dà il pulsante, ma la parte che riceve il file (controlli, ridimensionamento, salvataggio) la scrivi tu.

L’incolla da Word è la prova decisiva. Prima di scegliere, incolla nell’editor un documento vero pieno di stili e guarda l’HTML che ne esce. È il test che separa le librerie mature dalle altre.

Come scegliere in base al progetto #

• Sito o applicazione open source: CKEditor 5 o TinyMCE nella versione con licenza copyleft.
• Prodotto commerciale chiuso: Quill, Tiptap, Lexical, Jodit, Trix o Summernote, che hanno licenze permissive; oppure la licenza commerciale di CKEditor, TinyMCE o Froala.
• Pannello interno da fare in fretta: Summernote o Jodit.
• Contenuti strutturati da riutilizzare altrove: Editor.js.
• Serve la modifica collaborativa in tempo reale: CKEditor con licenza commerciale, oppure Tiptap con i suoi moduli a pagamento.
• Applicazione React costruita su misura: Lexical o Tiptap.

Domande frequenti #

Qual è l’editor WYSIWYG gratuito migliore? #

Per funzioni CKEditor 5, a patto che la licenza copyleft sia compatibile con il tuo progetto. Se il prodotto è chiuso e non vuoi comprare una licenza, Quill è il compromesso migliore fra leggerezza, licenza permissiva e qualità del risultato; Tiptap se sei disposto a costruirti l’interfaccia.

Questi editor sono sicuri contro gli attacchi di tipo XSS? #

Aiutano, ma non bastano. Gli editor filtrano il contenuto nel browser, e quel filtro si aggira mandando i dati direttamente al server. La pulizia va fatta sul server prima di salvare e, meglio ancora, anche prima di mostrare.

Posso usarli con React, Vue o Angular? #

Sì, i principali hanno componenti ufficiali per i framework più diffusi. Controlla però che il componente sia aggiornato alla versione del framework che usi: è lì che nascono più incompatibilità.

Meglio salvare HTML o JSON nel database? #

L’HTML è immediato da mostrare, ma lega il contenuto a una sola presentazione. Il JSON a blocchi, come quello di Editor.js, richiede un passaggio in più per la visualizzazione ma rende i contenuti riusabili in canali diversi. Per un blog l’HTML va benissimo; per contenuti destinati a sito, app e newsletter, il formato strutturato ripaga.

Un editor WYSIWYG appesantisce molto la pagina? #

Dipende dalla configurazione. Con le librerie modulari includi solo i plugin che servono e il peso scende parecchio. In ogni caso carica l’editor solo nelle pagine dove serve, non in tutto il sito.

Qual è il miglior editor WYSIWYG per WordPress? #

WordPress usa l’editor a blocchi Gutenberg, che non è una di queste librerie. Il vecchio Classic Editor, ancora disponibile come plugin, è basato su TinyMCE. Le librerie di questa guida ti servono se sviluppi un tuo CMS, un pannello o un’applicazione.

L’HTML prodotto va bene per la SEO? #

Se l’editor è buono e chi scrive usa i titoli come titoli e non come testo ingrandito, sì. Il problema nasce con il codice incollato da Word e con i <span> pieni di stili: tieni pulito l’output e, se puoi, limita nella barra le opzioni che portano a markup inutile, come i caratteri e le dimensioni personalizzate.