Tutorial de BBCode (poner BBcode a un script)

Tutorial de BBCode

Te enseÃ±amos a crear tu propio BBCode con PHP.

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

Muchos conocidos sistemas de foros y plataformas de gestiÃ³n de contenidos web utilizan BBCode. Por ejemplo phpBB Ã³ SMF

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:

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

Y al enviarlo reemplazarÃamos mediante una funciÃ³n en PHP las etiquetas [imagen] e [/imagen] por cÃ³digo HTML, quedando de la siguiente manera:

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

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:

<?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 ]' => '',
'[/b ]' => '',

// letra cursiva
'[i ]' => '',
'[/i ]' => '',

// letra subrayada
'[u ]' => '',
'[/u ]' => '',

// salto de lÃnea
'[salto ]' => ' ',

// 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:

<?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 ]' => '',
'[/b ]' => '',

// letra cursiva
'[i ]' => '', < '[/i ]' => '',

// letra subrayada
'[u ]' => '',
'[/u ]' => '',

// salto de lÃnea
'[salto ]' => '

',

// 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 ''.reemplazar( $mensaje ).'';

// 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 $HTTP_POST_VARS['mensaje']

Espero que este tutorial haya sido de utilidad para mÃ¡s de uno.

Informe de Antonio MelÃ©*
Estudiante de informÃ¡tica
URL: http://www.ciberseleccion.com