Articulos

PAGINACIÓN:

Cómo realizar un bbcode con inserción de código

Muchas webs (esta incluida) realizan inserciones de código en sus artículos, y para ello hacen uso de la etiqueta <pre>. Esta etiqueta muestra el texto tal cual se pega, es decir, dejará intactos los espacios y tabulaciones (cosa que viene genial a la hora de pegar un código).

Para implementar esto, hacen uso de los bbcode, la función htmlspecialchars
y de nl2br, para poder reemplazar las etiquetas html <> por tags bbcode [], y que el navegador no las interprete (para poder pegar el código correspondiente).

El problema viene al pasar la función nl2br, ya que la etiqueta pre, como ya dije, respeta los espacios y tabulaciones, pero la función nl2br transformará esos saltos de linea en etiquetas <br>, por lo que quedarán espacios entre lineas de nuestros códigos insertados.

Así que toca hacer uso de las expresiones regulares para poder solventar el problema, a continuación muestro un ejemplo de bbcode respetando los saltos de linea en las etiquetas <pre>

function BBCode($t)
{
	//array con los bbcode
	$bbc = array(
		'/\[i\](.*?)\[\/i\]/is',
		'/\[b\](.*?)\[\/b\]/is',
		'/\[u\](.*?)\[\/u\]/is\",
		'/\[del\](.*?)\[\/del\]/is',
		'/\[script\](.*?)\[\/script\]/is',
		'/\[pre\](.*?)\[\/pre\]/is\",
		'/\[img\](.*?)\[\/img\]/is\",
		'/\[url=([^\\[]*)\]([^\\[]*)\[\/url\]/'
	);
	//array con los reemplazos en html
	$html = array(
		'<span style=\"font-style: italic\">\\1</span>',
		'<span style=\"font-weight: bold\">\\1</span>',
		'<span style=\"text-decoration: underline\">\\1</span>',
		'<span style=\"text-decoration: line-through\">\\1</span>',
		'<pre>\\1</pre>',
		'<img src=\"\1\2\" alt=\"Crazy-Style.NET\" border=\"0\"/>',
		'<a target=\"_blank\" href=\"\\1\\">\\2</a>'
	);
	//realizamos el parseo
	$texto = preg_replace($bbc,$html,$t);
	//reemplazamos los saltos de linea por <br>
	$texto = nl2br($texto);
	//dado que usamos el tag <pre>, hay que eliminar los cambios efectuados por nl2br() en esta etiqueta
	$texto =  preg_replace('/<pre>(.*?)<\/pre>/ise',\"'<pre>' . preg_replace('/(<br \/?>/is','','\\1') . '</pre>'\",$texto);
}

Como podeis ver, este ejemplo de bbcode está bastante completo y además, permitirá insertar código sin ningún problema, gracias a la siguiente linea

$texto =  preg_replace('/<pre>(.*?)<\/pre>/ise',\"'<pre>' . preg_replace('/(<br \/?>/is','','\\1') . '</pre>'\",$texto);

Que buscará dentro de las etiquetas <pre>, la etiqueta <br> y la eliminará (o reemplazará por '')

EDITO: Me he dado cuenta que a la hora de publicar el código hay un problema con las dobles comillas. Si vais a hacer uso de este código, aseguraos antes de que las '\' están correctas entre dobles comillas, es decir si hay un "\\1" debe ser "\\1" y no \"\\1\" (siempre que no esté englobado en un comillado doble)

Hay 0 comentario(s) referentes al artículo