tinyMCE, la power-textbox… atto 2

Proseguo la carrellata di funzionalita’ di tinyMCE, la textbox per webdesigner potente, flessibile e OpenSource…

una della cose che cercavo era la configurabilita’ dei bottoni, ed in questo mi e’ venuto in aiuto la modalita’ di configurazione “advanced”:


tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "undo, redo, separator, bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull",
theme_advanced_buttons2 : "hr, separator, bullist, numlist, separator, outdent, indent, separator, link, unlink, separator, charmap",
theme_advanced_buttons3 : "",
height : "250px",
width : "480px"
});


in questo modo sto dicendo a tinyMCE di mettere sulla prima barra i tasti “annulla, ripeti, grassetto, corsivo, sottolineato, allinea a destra, al centro, a sinistra, giustificato” e sulla seconda
“togli indentazione, indenta, collegamento ipertestuale, elimina collegamento e mappa caratteri speciali”.
E’ possibile aggiungere una terza barra riempiendo il campo “theme_advanced_buttons3“.

il risultato:

da aggiungere che e’ possibile configurare le barre degli strumenti inserendo uno qualsiasi di questi bottoni:

bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, forecolorpicker, backcolorpicker, charmap, visualaid, anchor, newdocument, separator

tinyMCE, textarea con i controcoglioni…

oggi vi parlo di una cosetta che ho scoperto da poco, ma che a quanto pare esiste da una vita: tinyMCE. E’ l’editor di testo che usa, tra gli altri, WordPress per consentire a tutti di creare i propri post senza necessariamente conoscere l’HTML (tecnicamente: WYSIWYG editor).
Mi ha molto stupito la semplicita’ d’uso e la configurabilita’ dello strumento:

si aggiunge il riferimento alla libreria javascript:

<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

(opportunamente scaricata da qui)

e si inizializza il vettore di configurazione:

<script language="javascript" type="text/javascript">
tinyMCE.init({
	theme : "simple",
	mode : "textareas"
});
</script>

in questo modo stiamo dicendo di utilizzare una versione minimale del componente, ovvero solo alcune opzioni di formattazione tipo grassetto, corsivo, sottolineato, allineamenti vari ed elenchi puntati e numerati.
E’ possibile utilizzare molte altre opzioni a partire dal colore del testo fino all’inserimento di emoticon, passando per i collegamenti ipertestuali…
Da notare che la proprieta’ mode dice che TUTTE le textarea della pagina saranno convertite in editor HTML, sono disponibili molte altre opzioni che consentono una configurazione piu’ fine, ma per questa rimando alla documentazione ufficiale.

et voila’… abbiamo nel nostro form html una textarea potenziata, che consente all’utente di formattare il testo per il proprio sito web, senza rompere gli zebedei al webmaster di turno con continue richieste al livello di:
“ma non si potrebbero mettere in grassetto la 1^ e la 3^ lettera ? e il titolo in corsivo? e un link a guuugle nella 5^ riga?“…

…facile no?

smarty tutorial… i cicli

ecco un utile seguito per il post su smarty.

Nel primo post illustravo come assegnare le variabili da utilizzare poi nei template; la cosa e’ molto utile, ma lo sviluppatore ha necessariamente bisogno anche di un’altra struttura di controllo del flusso: i cicli!

Ecco che smarty ci viene in aiuto anche questa volta, fornendoci il costrutto foreach

facciamo conto di avere riepito dal lato dello script un array chiamato my_array con tre campi “id”, “nome” e “cognome”, tramite smarty possiamo nel template usare

{foreach item="curr_section" from=$my_array}
{/foreach}

per ciclare tutti gli elementi dell’array

e utilizzarne i valori tramite il punto


<table>
<tr>
<td>Identificativo</td>
<td>Nome</td>
<td>Cognome</td>
</tr>
{foreach item="curr_section" from=$my_array}
<tr>
<td>{$curr_section.id}</td>
<td>{$curr_section.nome}</td>
<td>{$curr_section.cognome}</td>
</tr>
{/foreach}
</table>


semplice no?

Hostswitcher langue, e io uso smarty….

Aspettando di riuscire a creare il progetto su sourceforge (devo provare da casa, qui al lavoro sti ‘azzo di firewall non mi fanno uscire con svn – magari poi faccio anche un mini tutorial…), mi sto un po’ dedicando allo sviluppo in php/mysql.

Mi ha sempre colpito l’immediatezza e la facilita’ con cui si programma in php: pochi costrutti semplici, classi ben fatte e che risolvono i problemi velocemente, velocita’ di esecuzione. L’ho sempre trovato scomodo pero’ per sviluppare progetti un po’ “ampi” con molte pagine e una separazione dei ruoli tra chi sviluppa e chi disegna le pagine: “richiede troppo sforzo la sincronizzazione tra i membri”, mi dicevo.

Adesso (magari da un po’, ma io l’ho scoperto adesso ) questo non e’ piu’ un problema, visto che c’e’ SMARTY!!!

Smarty e’ un template engine open source (http://smarty.php.net/ e http://it.wikipedia.org/wiki/Smarty) che consente veramente con poco sforzo di separare la parte di presentazione (grafica) da quella di controllo (programmazione, accesso al db)…

Con smarty e’ possibile concentrarsi sull’aspetto funzionale (per me che sono uno sviluppatore) e lasciare che i grafici facciano il loro lavoro (non li sopporto i css ).
Come funziona? semplicissimo: basta includere il file con la classe di smarty con

require 'smarty/Smarty.class.php';

instanziarla

$smarty = new Smarty;

assegnare le variabili

$smarty->assign("news", "Risolto il bug #1: Ubuntiani in festa");

e poi richiamare il template

$smarty->display('home.tpl');

Smarty provvedera’ a caricarsi il file, effettuare la sostituzione delle variabili e proporlo all’utente che naviga. Adesso tutto cio’ che resta da fare e’ riuscire a far comprendere ad un webdesigner che al posto del testo “placeholder” deve mettere il tag di smarty

{$news}

…ce la possiamo fare?

Spulciando la documentazione possiamo scoprire tante altre cosette interessanti, come il fatto che i delimitatori per le variabili possono essere personalizzati e i template compilati per non degradare le prestazioni. Ma qui non si vuole sostituire l’ottima documentazione reperibile qui in versione italiana

- Come nota in calce voglio aggiungere che rispetto il lavoro dei grafici e dei webdesigner, l’avene parlato come di persone stupide e’ solo a titolo goliardico