Creazione BBCODE personalizzati

http://www.e107italia.org/e107_plugins/content/content.php?content.36
Pagina 1/6
Creazione BBCODE personalizzati
Un metodo per creare BBCODE personalizzati.
elbambolo, lun 11 aprile 2011 - 08:18
1. COSA SONO I BBCODE
Fonte Wikipedia
BBCode è una abbreviazione di Bulletin Board Code (codice per bacheche elettroniche), una volta usato nelle BBS per scambiarsi
pagine data la maggior semplicità d'interpretare il codice per la visualizzazione, oggi il linguaggio di markup è usato per formattare i
messaggi in molti forum. I comandi (tag) disponibili sono di solito indicati racchiudendo tra parentesi quadre le parole chiave e sono
interpretati dal sistema prima di essere tradotti in un linguaggio di markup comprensibile per il browser web, di solito HTML o XHTML.
Il BBCode fu ideato per mettere a disposizione dell'utente medio un sistema più sicuro, più semplice e più limitato di formattare i
propri messaggi. Prima, molti forum permettevano l'uso di HTML, che poteva essere usato per danneggiare l'impostazione grafica del
sito, o per lanciare codice JavaScript malevolo. Alcune implementazioni di BBCode hanno comunque sofferto di vari problemi causati
dal metodo di traduzione in codice HTML, che portavano in seno le stesse falle che ci si aspettava fossero risolti da un sistema come
questo.
Nonostante i comandi base di BBCode siano simili in quasi tutti i software di gestione di forum, ci sono molte varianti. Alcune di queste
richiedono che i comandi siano maiuscoli o minuscoli. Alcune varianti hanno comandi per colorare il codice HTML, PHP, SQL ed altri
linguaggi di markup e linguaggi di programmazione.
Questo ci può far capire fin da subito le potenzialità di questo sistema.
2. STRUTTURA DEL BBCODE
Nella fase pratica, il bbcode effettua esclusivamente una sostituzione di codice, la struttura è abbastanza semplice e con un minimo
di conoscenza di html saremmo in grado di costruirci i nostri bbcode.
La semantica della struttura è la seguente: [nomebbcode=$parm]$code_text[/nomebbcode]
Prendiamo in esempio uno dei bbcode più utilizzato: Il bbcode
»
» [link]
[/link]
»
Questo BBCODE prende solitamente due parametri:
» url della pagina da linkare
http://www.e107italia.org/e107_plugins/content/content.php?content.36
Pagina 2/6
» nome visualizzato della pagina
Questa è la classica scrittura del bbcode:
»
» [link=url della pagina]nome visualizzato della pagina[/link]
»
Quando il nostro amato e107, trova il tag [ link ] non fà altro che andare a sostituire [ link ] al codice html che noi gli diciamo di
sostituire.
Questo codice si trova in:
» e107_files/bbcode/url.bb
la struttura di questo file, come si può vedere è abbastanza semplice.
Ora che sappiamo come e107 tratta i bbcode, possiamo andare avanti e iniziare a creare un nostro bbcode.
3. CREAZIONE DI UN BBCODE PERSONALIZZATO
Analisi:
Cosa dovrà fare il nostro bbcode?
Supponiamo di dover scrivere del testo all'interno di una tabella simile a questa:
Titolo
tutto il testo che vogliamo
Come vedete, la nostra tabella ha bisogno di due parametri:
» Titolo
» Testo
Noi utilizzeremmo
» $parm per il titolo
http://www.e107italia.org/e107_plugins/content/content.php?content.36
Pagina 3/6
e
» $code_text per il testo.
Prima di tutto, andiamo ad analizzare il codice per la costruzione della tabella. In html, per creare una tabella di questo genere
dovremmo scrivere:
» <table style="text-align: left;" border="1" cellpadding="2"
» cellspacing="2"><tbody><tr align="center"><td style="vertical-align: top;">Titolo<br></td></tr><tr align="center"><td style=
"vertical-align: top; text-align: center;">tutto il testo che vogliamo<br></td></tr></tbody></table>
iniziamo la creazione del nostro bbcode che chiameremmo ts (acronimo di tabella singola)
la prima cosa da fare sarà quella di creare un nostro file chiamato ts.bb e posizionarlo all'interno della cartella: e107_files/bbcode
andiamo a sostituire
» 'Titolo' con $parm
e
» 'Tutto il testo che vogliamo' con $code_text.
Il tutto racchiuso in un return.
Ecco il codice:
»
» return "
» <table style='text-align: left;' border='1' cellpadding='2'
» cellspacing='2'><tbody><tr align='center'><td style='vertical-align: top;'>$parm<br></td></tr><tr align='center'><td
style='vertical-align: top; text-align: center;'>$code_text<br></td></tr></tbody></table>";
»
»
Come potete vedere finora è tutto molto semplice. Salvate il file e chiudete.
Ora dobbiamo dire a e107 che ogni volta che incontra del testo racchiuso fra i tag [ts] deve andare a prendere il codice da ts.bb
Apriamo il file:
http://www.e107italia.org/e107_plugins/content/content.php?content.36
Pagina 4/6
e107_handlers/bbcode_handler.phpLa parte che ci interessa è la seguente:
»
»
global $pref;
»
$core_bb = array(
»
'blockquote', 'img', 'i', 'u', 'center',
»
'_br', 'color', 'size', 'code',
»
'html', 'flash', 'link', 'email',
»
'url', 'quote', 'left', 'right',
»
'b', 'justify', 'file', 'stream',
»
'textarea', 'list', 'php', 'time',
»
'spoiler', 'hide', 'youtube', 'menu', 'sanitised'
»
);
»
non dobbiamo fare altro che andare ad inserire il nostro bbcode all'interno di questa porzione di codice. Ecco come cambia il codice
quando andiamo ad inserire il nostro bbcode:
»
global $pref;
»
$core_bb = array(
»
'blockquote', 'img', 'i', 'u', 'center',
»
'_br', 'color', 'size', 'code',
»
'html', 'flash', 'link', 'email',
»
'url', 'quote', 'left', 'right',
»
'b', 'justify', 'file', 'stream',
»
'textarea', 'list', 'php', 'time',
»
'spoiler', 'hide', 'youtube', 'menu', 'sanitised', 'ts'
»
);
»
ts è stato aggiunto alla fine dopo sanitised
salviamo e chiudiamo il file.
A questo punto dobbiamo solo registrare la nostra bbcode, assegnarli un'help e un'icona.
Per fare questo dobbiamo editare il file:
e107_themes/templates/bbcode_template.phpall'interno di questo file, troviamo già un'esempio per la registrazione di una nuova
bbcode, e più esattamente:
http://www.e107italia.org/e107_plugins/content/content.php?content.36
Pagina 5/6
»
$register_bb['blank'] = array("", "[blank][/blank]","Blank example helper text",e_IMAGE."generic/bbcode/template.png");
»
la struttura è molto intuitiva, andiamo a scrivere quindi, appena al disotto di questa riga, il codice per la registrazione della nostra
bbcode, che nello specifico apparirà come segue:
» // $register_bb['ts'] = array("", "[ts=titolo][/ts]","utilizzo: [ts=titolo]testo[/ts]",e_IMAGE."generic/bbcode/ts.png");
»
&#036;register_bb['ts']
array("","[ts=titolo][/ts]"
"utilizzo: [ts=titolo]testo[/ts]"
e_IMAGE."generic/bbcode/ts.png"
Fatto questo e personalizzato tutto a dovere, dobbiamo solo compiere un'ultima azione: Dobbiamo specificare in quali pagine dovrà
apparire il nostro bbcode.
Per fare ciò, sempre nel file:
e107_themes/templates/bbcode_template.php troviamo una lista di pagine, non dobbiamo fare altro che aggiungere la nostra in quelle
che ci interessano. Se ad esempio vogliamo che la nostra bbcode sia visibile solo all'interno dell'editor che si trova in menu/pagine
personali, dovremmo scendere fino a trovare il seguente blocco di codice:
»
» $BBCODE_TEMPLATE_CPAGE = "
»
{BB_HELP}<br />
{BB=newpage}
»
{BB=link}{BB=menu}{BB=b}{BB=i}{BB=u}{BB=img}{BB=center}{BB=left}{BB=right}{BB=justify}
»
{BB=bq}{BB=code}{BB=list}{BB=fontcol}{BB=fontsize}{BB=emotes}
»
{BB_PREIMAGEDIR=".e_IMAGE."custom/}
»
{BB=preimage}{BB=prefile}{BB=flash}{BB=youtube}
» ";
»
e all'interno di questa porzione di codice inserire la nostra bbcode. Inserire la nostra bbcode è molto semplice, ci basterà modificare
il codice come segue:
»
http://www.e107italia.org/e107_plugins/content/content.php?content.36
Pagina 6/6
» $BBCODE_TEMPLATE_CPAGE = "
»
{BB_HELP}<br />
{BB=newpage}
»
{BB=link}{BB=menu}{BB=b}{BB=i}{BB=u}{BB=img}{BB=center}{BB=left}{BB=right}{BB=justify}
»
{BB=bq}{BB=code}{BB=list}{BB=fontcol}{BB=fontsize}{BB=emotes}
»
{BB_PREIMAGEDIR=".e_IMAGE."custom/}
»
{BB=preimage}{BB=prefile}{BB=flash}{BB=youtube}{BB=ts}
» ";
»
4. CONCLUSIONI
Come potete vedere, inserire, creare o personalizzare un bbcode è abbastamza semplice. Le conoscenze tecniche per poter
applicare un bbcode rimangono a mio avviso alla portata di tutti e questo anche grazie ad un team di sviluppatori che ci REGALANO e
ci mettono a disposizione ogni giorno guide, tutorial e strumenti in grado di semplificarci la vita.