Tutorial de BBCode

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

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:

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

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

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

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

Autor

Antonio Melé

Estudiante de informática

Compartir

Comentarios

Edu

29/8/2007
Hola el codigo esta muy bien y eslo que buscaba hace tiempo..

Solo comentar un duende dejo un caracter en el codigo el cual da error....

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

este caracter sobra .... < ......
situado en ......,< '[/i].....

Solo queria coemntarlo

laura

28/4/2009
solicito indicaciones
por favor indiquenme un codigo bbcode para postear una imagen y que sobre esta imagen al pasar el cursor este cambie
ahi esta mi correo por favor envienme la forma de hacerlo

gracias

Antonio Melé

18/11/2009
Sin copyright
Soy Antonio Melé. Publiqué este artículo en 2005. Tras haber enviado varios e-mails a desarrolloweb.com y no obtener respuesta quiero dejar claro aquí que mi artículo es de dominio público y cualquiera tiene derecho a copiarlo y reproducirlo. Yo escribí un artículo de dominio publico y permití que Desarrollweb.com lo publicara, pero ellos NO poseen ningún copyright sobre él.

ivan

06/4/2010
sobre sql
y par publicarlo que campos jalo a la hora de insertarlo en la base de datos

Gabriel

05/11/2010
Consulta
Hola muy bueno el articulo, esta todo bien pero ahora quiero saber por ejemplo cuando un usuario esta creando un articulo en BBcode el usuario vaya a la opción "Insertar imagen" y que se le habrá una ventana donde va a insertar el url de la imagen y que después aparezca automática en el campo de texto.
Gracias

Miguel

19/1/2014
¿Alguien?
Podrían pasarmelo ya listo, la razón es que entiendo algunas cosas muy poco.