Tutoriais

BBCode PHP - Criando e implantando em seu site ou sistema

» Publicado em: 02/06/2009 11:22 » Atualizado: 01/12/2009 18:10 » Por: Thiago Ferreira Peres

» Atalho Para Este Tópico (URL Curta - Short): http://mti.ly/s/B

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
          '//'      => "<img src="img/smilies/angry.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/attention.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/biggrin.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/blink.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/confused.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/cool.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/crying.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/cursing.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/evil.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/huh.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/love.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/mellow.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/pinch.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/question.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/rolleyes.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/sad.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/sleeping.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/smile.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/squint.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/thumbdown.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/thumbsup.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/thumbup.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/tongue.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/unsure.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/w00t.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/wacko.png" alt="Angry" />",
          '//'      => "<img src="img/smilies/whistling.png" alt="Angry" />",
          '//'      => "<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("[b]texto negrito[/b]");

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...

Comentários e Dúvidas