Trix è un editor "What you see is what you get" (WYSIWYG) ideato da Basecamp, la casa di produzione di Chicago ideatrice dell'apprezzatissimo linguaggio di programmazione RubyOnRails. Trix consente di costruire testi formattati nel contesto di un'applicazione Web moderna: scrittura di messaggi, commenti, commenti on-the-fly, articoli e cosi via.
Esistono già moltissimi editor WYSIWYG sul mercato, sia commerciali che open source, dunque perché uno sviluppatore dovrebbe dare un'opportunità a Trix? Sono gli stessi creatori a darci una risposta. Trix svolge il medesimo scopo di un editor WYSIWYG, ma con un motore che lavora in background concettualmente differente.
Gli editor di solito si basano principalmente sull'utilizzo della proprietà contenteditable degli elementi HTML e sulla relativa API execCommand, ideata da Microsoft per fornire il supporto all'editing on-the-fly delle pagine Web dalla versione 5.5 di Internet Explorer e successivamente implementata anche nei browser dei competitor. Dato che queste interfacce non sono mai state documentate in modo soddisfacente e che ogni browser ha prodotto la sua particolare gestione della funzionalità, lo sviluppatore Javascript ha dovuto ingegnarsi da solo per risolvere alcune delle problematiche relative agli errori ed alla compatibilità cross-browser.
Trix utilizza contenteditable come un dispositivo Input/Output: quando un input viene prodotto ed inserito nell'editor, Trix lo converte in una vera operazione di editing instillandolo nel "suo" Document Model interno, dopodiché, tramite il passaggio finale, riproduce questo modello all'interno dell'editor. Tale logica permette a Trix di esercitare un controllo completo su cosa accade ad ogni pressione sulla tastiera da parte dell'utente, evitando completamente l'API execCommand.
Trix supporta tutti i maggiori browser sia nella versione Desktop che in quella mobile ed è costruito con i nuovi standard di programmazione Web, come i Custom Elements, i Mutation Observer e le Promises.
Sulla pagina Git del progetto è possibile trovare tutte le informazioni necessarie per iniziare ad utilizzare Trix, con tanto di esempi live e un'ampia documentazione. L'installazione è semplice, dato che segue la classica procedura HTML in cui dovremo aggiungere i tag link e script nel nostro tag head:
<head>
<link rel="stylesheet" type="text/css" href="trix.css">
<script type="text/javascript" src="trix.js"></script>
</head>Successivamente basterà aggiungere il tag <trix-editor></trix-editor> nel body e l'engine si occuperà di convertirlo in un editor Trix funzionante.
Ovviamente è possibile customizzare l'editor, stilizzandolo, popolandolo di contenuti di default, configurandolo e posizionandolo in contesti differenti, come ad esempio nei form:
<form …>
<input id="x" value="Contenuto dell editor" type="hidden" name="content">
<trix-editor input="x"></trix-editor>
</form>
<form …>
<input id="x" type="hidden" name="content">
<trix-editor input="x"></trix-editor>
</form>Via Trix
