BBcode tutorial

Introducción

BBCode es una implementación especial del HTML. Nos va a servir para simplificar código HTML de modo que nuestros usuarios puedan utilizarlo en al enviar noticias a nuestra web, dejar sus mensajes en nuestro foro, etc. Lo usaremos en todo tipo de formularios en los que queramos que el usuario pueda insertar enlaces, imágenes, tablas, imoticonos, etc. de forma sencilla y sin necesidad de tener conocimientos sobre HTML.

El BBCode se utiliza de una forma similar al lenguaje HTML: Se utilizan etiquetas entre corchetes de la siguiente manera: Usaremos [etiqueta] para abrir la etiqueta y [/etiqueta] para cerrarla.

Basicamente es: una copia generica y sensilla del code html

Muchos conocidos sistemas de foros y plataformas de gestión de contenidos web utilizan BBCode.


Vamos a ver el esquema de envío de texto + BBCode para incluir una imágen. El usuario escribiría en el textarea de un formulario:

Código:

[imagen]http://www.mi_servidor.com/mi_imagen.jpg[/imagen]

Y al enviarlo reemplazaríamos mediante una función en PHP las etiquetas

Código:

[imagen] e [/imagen] por código HTML, quedando de la siguiente manera:

<img src="http://www.mi_servidor.com/mi_imagen.jpg" />

Esto nos permite jugar como queramos con las etiquetas. Si usamos una base de datos podemos guardar los mensajes enviados en modo texto y BBCode tal como han sido redactados y para mostrarlos utilizar una función PHP para reemplazar el código BBCode por el código HTML correspondiente.

Creando nuestros BBCodes con PHP

Definiremos las etiquetas BBCode que nosotros queramos con el código HTML que les corresponda y crearemos una función con PHP para sustituir los BBCodes escritos por el usuario por código HTML. Utilizaremos la función STR_REPLACE() de PHP para reemplazar las etiquetas BBcode por HTML.

Primero asociaremos código HTML a etiquetas elementales de BBCode mediante un array. Lógicamente podéis crear vuestras propias etiquetas con el código HTML que queráis:

Código:


<?php

$bb_code = array(
// emoticonos: debéis apuntar a vuestras imágenes en el código HTML
':)' => '<img src="feliz.gif" />',
':(' => '<img src="triste.gif" />',
':D' => '<img src="contento.gif" />',

// letra negrita
'[b]' => '<span style="font-weight:bold">',
'[/b]' => '</span>',

// letra cursiva
'[i]' => '<span style="font-style:italic">',
'[/i]' => '</span>',

// letra subrayada
'[u]' => '<span style="text-decoration:underline">',
'[/u]' => '</span>',

// salto de línea
'[salto]' => '<br><br>',

// imagenes
'[imagen]' => '<img src="',
'[/imagen]' => '" />'

// recordad que después del último elemento no hay coma
);
?>

Ahora utilizaremos una función para reemplazar las etiquetas BBCode por código HTML:

<?php
function reemplazar( $codigo )
{
$search = array_keys( $GLOBALS['bb_code'] );
$codigo = str_replace( $search, $GLOBALS['bb_code'], $codigo );
return $codigo;
}
?>

En este ejemplo $codigo es la variable en la que pasaremos a la función con el texto+BBCode que haya escrito el usuario.

Ahora vamos a ver el código completo listo para ser probado que incluye los códigos anteriores con un texto+BBCode de ejemplo:

Código:


<?php

// definimos nuestras etiquetas
$bb_code = array(
// emoticonos: debéis apuntar a vuestras imágenes en el código HTML
':)' => '<img src="feliz.gif" />',
':(' => '<img src="triste.gif" />',
':D' => '<img src="contento.gif" />',

// letra negrita
'[b]' => '<span style="font-weight:bold">',
'[/b]' => '</span>',

// letra cursiva
'[i]' => '<span style="font-style:italic">', < '[/i]' => '</span>',

// letra subrayada
'[u]' => '<span style="text-decoration:underline">',
'[/u]' => '</span>',

// salto de línea
'[salto]' => '<br><br>',

// imagenes
'[imagen]' => '<img src="',
'[/imagen]' => '" />'

// recordad que después del último elemento no hay coma
);

// Definimos nuestro mensaje de prueba
$mensaje = 'Esta palabra está en [b]negrita[/b] y [u]esto está subrayado.[/u] '
.'[salto]Este es el logo de desarrolloweb: [salto]'
.'[imagen]http://www.desarrolloweb.com/images/desarrollo_web.gif'
.'[/imagen]';

// Reemplazamos el BBCode por código HTML y lo mostramos en la página
echo '<p>'.reemplazar( $mensaje ).'</p>';

// Incluimos la función para reemplazar el código
function reemplazar( $codigo )
{
$search = array_keys( $GLOBALS['bb_code'] );
$codigo = str_replace( $search, $GLOBALS['bb_code'], $codigo );
return $codigo;
}
?>

Para trabajar con formularios sólo tenemos que reemplazar $mensaje por el valor enviado a través del formulario. Por ejemplo pondríamos un campo textarea llamado "mensaje" en el formulario que apuntara a nuestro script PHP y en éste cambiaríamos el valor de $mensaje por

Código:

$HTTP_POST_VARS['mensaje']

Espero que este tutorial haya sido de utilidad para más de uno. [code]

Buena info!

+5 coins