Corso online Responsive Design per imparare a creare siti Web table-less responsivi con HTML5 e CSS3

TinyMCE, il miglior rich text editor per siti Web

Pubblicato da Luca Ruggiero nella categoria Client Scripting » » »

Quando programmo un sito per me stesso, nel quale devo aggiungere contenuti di una certa lunghezza dinamicamente, utilizzo una semplice textarea in cui scrivi il testo formattandolo direttamente con i comandi HTML. Il testo verrà poi inviato al database insieme a tutti i tag che ho utilizzato, quindi nella pagina di front office del sito verrà mostrato ben formattato.

Ma quando il sito è per un cliente e non conosce l'HTML? Semplice, uso un rich text editor, ossia un sistema visuale simile che permette di formattare il testo in modo da vedere l'output stilistico finale all'interno dell'area di testo stessa.

Questi script offrono un sistema classificabile come WYSIWYG (acronimo inglese di "What You See Is What You Get", ossia "quello che vedi è quello che ottieni"). Ma quale usare?

Dopo accurate ricerche in rete sono arrivato alla conclusione che il migliore è TinyMCE, disponibile sia in versione Javascript che in versione jQuery. Consente di personalizzare l'editor in maniera semplice e modulare, aggiungendo plugin alla configurazione di base e gestendo anche la lingua dell'interfaccia per l'utente che. Lingua che, per default, è l'inglese.

Ecco come si presenta TinyMCE:

TinyMCE

Un vero e proprio editor di testo con una caratteristica molto importante rispetto a tanti altri: scrive codice HTML pulitissimo, nel rispetto degli standard e senza "fronzoli" di formattazione che potranno essere invece gestiti separatamente dal designer del sito via CSS: giustificazione ed interlinea dei paragrafi e degli elenchi, colore del testo, stile dei link e così via.

Per prima cosa scarichiamo la libreria ed anche il plugin per la lingua, scegliendo ad esempio l'italiano (rappresentato dal file it.js).

Copiamo sul nostro server la cartella tinymce, all'interno della quale troveremo quattro cartelle ed un file:

Vediamo un esempio di codice per configurare TinyMCE:

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "#contenuto",
    plugins: "link,image",
    language: "it"
});
</script>
<textarea name="contenuto" id="contenuto" rows="15"></textarea>

Per prima cosa, richiamiamo la libreria Javascript. Richiamiamo quindi la funzione principale di TinyMCE e specifichiamo il selettore di associazione alla textarea che ci interessa (in questo caso, ci leghiamo all'ID "contenuto). Richiamiamo quindi due plugin (quello per inserire link ed immagini, separandoli con una virgola) e, in fine, specifichiamo la lingua in cui mostrare l'editor all'utente).

CANALI DEL BLOG
Hosting (11)
Linux (3)
Office (4)