Come impostare una barra strumenti di testo nel proprio sito con TinyMCE

Se avete deciso di creare con le vostre sole forze un sito, senza quindi l’aiuto di joombla o di wordpress, avrete sicuramente bisogno di un buon pannello che nelle textaree vi dia la possibilità di modificare la grandezza del carattere, il tipo, la sottolineatura e perfino il colore; il migliore di questi strumenti che ho trovato è TinyMCE.

 

TinyMCE è una piattaforma scritta in javascript che permette di trasformare le textaree e altri elementi html in istanze di edito. L’integrazione nella pagina html è molto semplice, anche se in parte presenta qualche bug, come la difficoltà di aggiungere le immagini.
Per prima cosa rechiamoci nel sito http://www.tinymce.com e scarichiamo il programma, estraiamo il contenuto nella cartella del nostro sito. adesso nella pagina dove desideriamo che compaia la barra degi strumenti inseriamo nella sezione HEAD le seguenti linee di codice:

 

tinyMCE.init({
mode : “textareas”,
theme : “simple”  
});

La dicitura “simple” indica che verranno visualizzati solo i pulsanti fondamentali che in questo caso sono il grassetto, il corsivo, gli elenchi puntati e numerati, mentre la dicitura “textareas” indica che la barra degli strumenti verrà applicata solo alle textaree.
É possibile mostrare molti più strumenti semplicemente scrivendo al posto delle righe incollate precedentemente le seguenti righe


tinyMCE.init({
mode : “textareas”,
theme : “advanced”,
plugins : “emotions,spellchecker,advhr,insertdatetime,preview”,

// Theme options – button# indicated the row# only
theme_advanced_buttons1 : “newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect”,
theme_advanced_buttons2 : “cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor”,
theme_advanced_buttons3 : “insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions”,     
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true
});
>

 


In sostanza l’effetto che che si ottiene con i due tipi di istruzioni sono questi:

 

NOTA: una piccola curiosità che ho potuto scoprire di persona è che se avete assegnato ad alcun text aree l’attributo display:none ( e magari volete che la tabella sia visualizzata in seguito tramite uno script), quando farete apparire la textarea essa sarà senza barra degli strumenti. Questo perchè al momento del caricamento della pagina l’attributo era display:none. Per risolvere questo problema le soluzioni sono tante e probabilmente più eleganti del mio: io personalmente ho messo la textarea interessata all’interno di un div. In questo modo è il div ad avere display:none.