Tutoriais

Atualizado em 01 dez 2009 18h10

BBCode PHP - Criando e implantando em seu site ou sistema

  • URL Curta:
BBCode PHP - Criando e implantando em seu site ou sistema
O que é BBCode?
BBCode é uma implementação especial de HTML.
Segundo a wikipédia BBCode (abreviação de Bulletin Board Code) é uma pequena linguagem criada pelos fóruns phpBB e agora está presente na maioria dos fóruns do mundo. O BBCode é utilizado para formatar ou adicionar efeitos nas mensagens (posts) em fóruns. As tags normalmente aparecem entre chaves com uma letra ou palavra no meio, para demonstrar que o BBCode está começando usa-se [] e para terminar [/]. Um sistema converte esses códigos aos meio entendíveis dos browsers, como HTML ou XHTML. A principal vantagem de se utilizar BBCode é a simplicidade do código facilitando novos usuários a usar os código de modo mais fácil

Mas vamos ao que interessa, implementar o famoso BBCode em seu site, blog, etc.
Tudo é muito simples e você poderá implantar em qualquer lugar que exija do usuário formatação em áreas de texto.
Os bbcodes tem grande vantagens sobre a liberação do uso do html, claro que com o uso da função strip_tags do php fica mais fácil o uso do html, mas para o usuário é muito mais simples e fácil o uso de tags bbcode.


Existe várias formas de implantar o bbcode em seu site ou sistema PHP, vou mostrar abaixo a função que uso no sites e sistemas que desenvolvo.

Implantando BBCodes em seu site ou sistema - PHP
<?php
function bbcode($texto) {
$tags = array(
//Básicos
"/(?<!)[color(?::w+)?=(.*?)](.*?)[/color(?::w+)?]/si" => "<span style="color:1;">2</span>",
'/(?<!)[size(?::w+)?=(.*?)](.*?)[/size(?::w+)?]/si' => "<span style="font-size:1;">2</span>",
'/(?<!)[b(?::w+)?](.*?)[/b(?::w+)?]/si' => "<span style="font-weight:bold;">1</span>",
'/(?<!)[code(?::w+)?](.*?)[/code(?::w+)?]/si' => "<span class="barra-code">CÓDIGO</span><code class="code">1</code>",
'/(?<!)[i(?::w+)?](.*?)[/i(?::w+)?]/si' => "<span style="font-style:italic;">1</span>",
'/(?<!)[u(?::w+)?](.*?)[/u(?::w+)?]/si' => "<span style="text-decoration: underline;">1</span>",
'/(?<!)[align(?::w+)?=(.*?)](.*?)[/align(?::w+)?]/si' => "<span style="display:block;text-align:1">2</span>",
// Smilies
'/:ang:/' => "<img src="img/smilies/angry.png" alt="Angry" />",
'/:!!:/' => "<img src="img/smilies/attention.png" alt="Angry" />",
'/:big:/' => "<img src="img/smilies/biggrin.png" alt="Angry" />",
'/:Ooo:/' => "<img src="img/smilies/blink.png" alt="Angry" />",
'/:con:/' => "<img src="img/smilies/confused.png" alt="Angry" />",
'/:col:/' => "<img src="img/smilies/cool.png" alt="Angry" />",
'/:cry:/' => "<img src="img/smilies/crying.png" alt="Angry" />",
'/:cur:/' => "<img src="img/smilies/cursing.png" alt="Angry" />",
'/:evi:/' => "<img src="img/smilies/evil.png" alt="Angry" />",
'/:huh:/' => "<img src="img/smilies/huh.png" alt="Angry" />",
'/:lov:/' => "<img src="img/smilies/love.png" alt="Angry" />",
'/:mel:/' => "<img src="img/smilies/mellow.png" alt="Angry" />",
'/:pin:/' => "<img src="img/smilies/pinch.png" alt="Angry" />",
'/:que:/' => "<img src="img/smilies/question.png" alt="Angry" />",
'/:rol:/' => "<img src="img/smilies/rolleyes.png" alt="Angry" />",
'/:sad:/' => "<img src="img/smilies/sad.png" alt="Angry" />",
'/:sle:/' => "<img src="img/smilies/sleeping.png" alt="Angry" />",
'/:smi:/' => "<img src="img/smilies/smile.png" alt="Angry" />",
'/:squ:/' => "<img src="img/smilies/squint.png" alt="Angry" />",
'/:thd:/' => "<img src="img/smilies/thumbdown.png" alt="Angry" />",
'/:thu:/' => "<img src="img/smilies/thumbsup.png" alt="Angry" />",
'/:thm:/' => "<img src="img/smilies/thumbup.png" alt="Angry" />",
'/:ton:/' => "<img src="img/smilies/tongue.png" alt="Angry" />",
'/:uns:/' => "<img src="img/smilies/unsure.png" alt="Angry" />",
'/:w00:/' => "<img src="img/smilies/w00t.png" alt="Angry" />",
'/:wac:/' => "<img src="img/smilies/wacko.png" alt="Angry" />",
'/:whi:/' => "<img src="img/smilies/whistling.png" alt="Angry" />",
'/:win:/' => "<img src="img/smilies/wink.png" alt="Angry" />",

// BBCode [url]
'/(?<!)[url(?::w+)?]www.(.*?)[/url(?::w+)?]/si' => "<a href="http://www.1" onclick="window.open(this.href); return false;">1</a>",
'/(?<!)[url(?::w+)?](.*?)[/url(?::w+)?]/si' => "<a href="1" onclick="window.open(this.href); return false;">1</a>",
'/(?<!)[url(?::w+)?=(.*?)?](.*?)[/url(?::w+)?]/si' => "<a href="1" onclick="window.open(this.href); return false;">2</a>",
// Download
'/(?<!)[down(?::w+)?=(.*?)?](.*?)[/down(?::w+)?]/si' => "<img class="down" src="".BASE_URL."img/download.gif" alt="" /> <a href="1" onclick="window.open(this.href); return false;">2</a>",

// BBCode Imagem
'/(?<!)[img(?::w+)?](.*?)[/img(?::w+)?]/si' => "<a href="1" title="Ampliar" class="highslide" onclick="return hs.expand (this)"><img src="1" alt="Imagem" /></a>",

'/([/?w+(?::w+)*])/' => "1"

);
$texto = preg_replace(array_keys($tags), array_values($tags), $texto);
return nl2br($texto);
}
?>

Essa é uma função bbcode. O que tem nessa função nada mais é que um array:
$tags = array('[tag]texto[/tag]' => "<span style="color:red">texto</span>");


Logo após no final eu mando procurar e substituir a tag pelo valor que é html, assim o navegador irá interpretar perfeitamente.

Esse exemplo acima é um uso simples, para usar com variavéis e textos em banco de dados é necessário o uso de expressões regulares, como está mostrado na função acima.

Usar a função:
Salve o código em um arquivo .php ou baixe o anexo neste tópico, logo após incluca o mesmo no arquivo que será usado, exemplo:
require_once('bbcode.php');
echo bbcode("texto negrito");


O texto será exibido em negrito.

Nesta função tem os seguintes bbcodes configurados:
b,i,aling,u,url,img,code,color,size e alguns códigos para smilies.

A função poderá se usada para criar novos bbcodes ou remoção dos mesmos.

Ok, tudo muito lindo e interessante, mas agora como fazer os bbcodes clicavéis e com imagens?

Este é um assunto para um próximo tópico, aguardem...

© MNDTI - Tecnologia e Informação. Todos Direitos Reservados. Política de privacidade.