Corsi on-line

Trix: un text editor per le Web applications

Trix è il nome di un progetto sviluppato e rilasciato sotto licenza Open Source che si segnala innanzitutto per essere stato implementato dai coders di Basecamp, cioè i creatori del framework Ruby on Rails, esso nasce dall’esigenza di fornire agli utilizzatori un editor di testo in grado di restituire la migliore user experience possibile; sostanzialmente ci troviamo di fronte ad un’ulteriore proposta per quanto riguarda le soluzioni WYSIWYG (What You See Is What You Get) con alcuni elementi di novità.

TrixTrix infatti nascerebbe per differenziarsi da quegli editor che sono stati costruiti intorno alle API (Application Programming Interface) contenteditable ed execCommand realizzate dalla Casa di Redmond per supportare l’editing in tempo reale delle pagine Internet su Internet Explorer, interfacce poi riadattate per la compatibilità con browser di terze parti; questo stato di cose, e la mancanza di un specifiche e documentazione a riguardo, avrebbe portato ciascuna implementazione a presentare dei bug spcifici per l’applicazione di riferimento.

Parliamo quindi di problematiche la cui risoluzione sarebbe stata lasciata completamente a carico degli sviluppatori JavaScript, spesso costretti a dover gestire livelli di inconsistenza e di incompatibilità anche molto gravi; da qui l’idea di realizzare Trix, un editor il cui sorgente manipola contenteditable come una sorta di dispositivo I/O: l’applicazione convertirà un input in un’operazione di editing nel suo document model.

Ciò porterà ad una nuova procedura di rendering finalizzata alla restituzione del documento editato nell’interfaccia di Trix e non vi sarà la necessità di una chiamata ad execCommand per la programmazione. L’utilizzo di questa soluzione si rivelerà particolarmente semplice grazie alla necessità di dover includere soltanto due file: un “.js” e un foglio di stile CSS tra le intestazioni di pagina:

<head>
  …
  <link rel="stylesheet" type="text/css" href="trix.css">
  <script type="text/javascript" src="trix.js"></script>
</head>

Fatto questo si avrà la possibilità di posizionare l’area di testo per l’accesso alle funzionalità per l’editing di Trix nel punto desiderato della propria pagina Web:


<form …>
  <input id="x" value="Blah! Blah! Blah!" type="hidden" name="content">
  <trix-editor input="x"></trix-editor>
</form>

L’editor viene supportato ampiamente da tutti i browser per la navigazione Web più diffusi anche nell’ecosistema mobile, inoltre, si basa su alcuni degli standard più recenti, come per esempio Custom Elements, Mutation Observer e Promises, funzionalità eventualmente mancanti potranno essere gestite tramite polyfills. Integrato nei form basati sugli elementi textarea o trix-editor Trix accetta gli attributi autofocus e placeholder. trix-editor presenta il vantaggio di supportare l’espansione verticale per l’adattamento ai contenuti.

Via Trix

Post correlati
I più letti del mese
Tematiche