O BBCode é um recurso amplamente utilizado em fóruns. Ele permite editar textos de forma simples e rápida, sendo de fácil compreensão inclusive para leigos em HTML.
Neste post mostrarei como criar alguns BBCodes mais usados, como [b] (negrito), [i] (itálico), [img] (imagem), [url] (link), [youtube] (para vídeos do youtube) e outros.
Basicamente, o que precisamos para montar o sistema de BBCode é usar funções de reposicionamento (replace) de textos, utilizando Expressões Regulares (ER’s), a fim de modificar apenas uma parte da string, sem perder o dado principal contido nela – o conteúdo a ser exibido com formatação.
Vamos começar com exemplos simples.
Negrito e Itálico
1 2 3 4 5 6 7 8 9 | // exemplo 1 $str = 'exemplo de texto em [b]negrito[/b] para testar BBCode'; $str = preg_replace( "/\[b\](.*?)\[\/b\]/i", "<strong>$1</strong>", $str ); echo $str; // exemplo 2 $str = 'exemplo de texto em [b]negrito[/b] para testar BBCode'; $str = preg_replace( "/\[(\/)?b\]/i", "<$1strong>", $str ); echo $str; |
A vantagem do primeiro exemplo é que, se o usuário esquecer de fechar a tag, por exemplo, o texto não ficará totalmente em negrito. Teste o segundo exemplo com a string abaixo e veja o resultado.
1 | $str = 'exemplo de texto em [b]negrito[/b para testar BBCode'; |
A ER irá casar (match) com “[b]“, inserindo a tag . Porém, não encontrará o fechamento “[/b]“, para inserir a tag . Assim, todo o texto seguinte ficará em negrito.
O BBCode para itálico é praticamente igual. Basta mudar [b] para [i] e para .
Imagens
Para inserir imagens, geralmente é usada a seguinte sintaxe:
1 | [img]http://url_da_imagem.jpg[/img] |
Nesse caso, usaremos o seguinte trecho para transformarmos o BBCode em HTML:
1 2 3 | $str = '[img]http://www.inf.ufpr.br/rbc08/linux_user_id.png[/img]'; $str = preg_replace( "/\[img\](.*?)\[\/img\]/i", "<img src=\"$1\" alt=\"texto_alternativo\" />", $str ); echo $str; |
A ER captura o conteúdo entre as tags [img] e [/img] e o insere no atributo src da tag img.
Links
Vamos assumir que o BBCode para link seja da seguinte forma:
[url=http://url_desejada]Texto que será exibido como link[/url]
Para essa situação, devemos casar duas string: a URL e o texto a ser exibido. Logo, usaremos o seguinte código:
1 2 3 | $str = '[url=http://www.rberaldo.com.br]Blog do Beraldo[/url]'; $str = preg_replace( "/\[url=(.*?)\](.*?)\[\/url\]/i", "<a href=\"$1\" target=\"blank\">$2</a>", $str ); echo $str; |
Adicionei o atributo target para evitar que o link seja exibido na mesma página. Você pode retirá-lo. Também pode adicionar outros atributos, como rel, a fim de definir a relação do link com sua página.
Texto colorido
Para colorir textos, usaremos o BBCode [color=cor_desejada][texto[/color].
1 2 3 | $str = '[color=red]texto vermelho[/color]'; $str = preg_replace( "/\[color=(.*?)\](.*?)\[\/color\]/i", "<spen style=\"color: $1\">$2</span>", $str ); echo $str; |
É possível usar nomes de cores, como green, red, blue, black etc, ou o código hexadecimal dela, no padrão #123456.
Vídeos do Youtube
O Youtube disponibiliza em sua página o código-fonte do vídeo exibido, a fim de permitir que você o insira em sua página. Logo, também podemos criar um BBCode para inserir vídeos, bastando inserir o código embed (incorporar) mostrado na página do Youtube, junto ao player do vídeo, como mostra a imagem abaixo:
O código para postagem é basicamente este:
<object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/codigo_do_video"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/codigo_do_video" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
Logo, basta inserirmos o código do vídeo onde está a string “codigo_do_video”.
1 2 3 4 5 6 7 8 9 10 11 12 | // string que será usada no reposicionamento $replace = " <object width=\"425\" height=\"344\"> <param name=\"movie\" value=\"http://www.youtube.com/v/$1\"></param> <param name=\"allowFullScreen\" value=\"true\"></param> <param name=\"allowscriptaccess\" value=\"always\"></param> <embed src=\"http://www.youtube.com/v/$1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed> </object>"; $str = '[youtube]http://www.youtube.com/watch?v=YaXLlyEm4kQ&feature=rec-HM-r2[/youtube]'; $str = preg_replace( "/\[youtube\].+?watch\?v=([^&]+).*?\[\/youtube\]/i", $replace, $str ); echo $str; |
Criei a variável $replace para facilitar a visualização do código que será usado no replace. A ER desse exemplo é um pouco mais complexa, mas não é tão difícil de compreendê-la. “.+?” casa com “http://” até qualquer coisa antes de “watch”. “([^&]+)” pega o código do vídeo, que não pode contar o caractere “&”, que é o delimitador de variáveis da URL. Após o código do vídeo, pode ou não haver outras variáveis, por isso termina-se com “.*?”.
Lógica semelhante pode ser usada para Google Vídeos ou outros sites afins.
É possível criar BBCodes para diversas outras finalidades. Basta ter criatividade e conhecimento de ER’s, para saber montar as regras de reposicionamento.
Alguns links interessantes:
Guia sobre Expressões Regulares
Documentação da função preg_replace
Bacana, como eu faria entao pra criar um highlight ?
Um sistema de highlight é bem parecido com o sistema de BBCode. Usando ERs, você envolve os textos com tags de formatação HTML a fim de destacar o conteúdo desejado.
Explique exatamente qual é sua dúvida, caso não tenha ficado claro como fazer highlight.
olhe eu criei este este bbcode:
$str = '[flash(500,500)]http://www.cidadedossims.com/flash_fans/contagem_cds_ts3ambitions.swf[/flash]
$str = preg_replace( "/\[flash((.*?),(.*?))\](.*?)\[\/flash]/i", $anexo_2, $str );
masta a ver problema co isto: ((.*?),(.*?))
pode-me ajudar?
Nota:Eu não posso tira este patetice [flash(500,500)].
@ddik
Faltou escapar os parênteses que são parâmetros de [flash]
Também pode haver problema em $anexo_2. Qual é o valor dessa variável?
O $anexo_2 e isto:
$anexo_2 = "";Se eu tirar este [flash(500,500)]
fica todo bem mas eu no posso tirar porque este sistema e baciado noutro e esse e não posso modificar.
obrigado
@ddik
Isso quer dizer que você está substituindo por uma string vazia.
Estude ER, veja como elas funcionam, para entender o que colocar no segundo parâmetro de preg_replace()
olhe e não consigui postar não ta sempre a dizer cometário duplicado
@Beraldo
não o código que postei sumiu mas já ta tudo resolvido
como eu faço para implantar esse codigo em uma pagina html ?
Você precisa de um servidor com suporte a PHP