Códigos BB
Los códigos BB son un sistema de marcado ampliamente utilizado que permite formatear el texto con diferentes fuentes, colores y tamaños, junto con otras capacidades como poner en negrita o en cursiva el texto. Aproximadamente está basado en el marcado HTML, como por ejemplo el código BB que define el texto en negrita que es [b] y que puede utilizarse para poner en negrita la palabra negrita:
Este mensaje contiene algún texto en [b]negrita[/b].
También puede utilizarse en estructuras más complejas, como citar mensajes de otros usuarios, agregar spoilers o bloques de código. En estos casos, el código BB puede llevar una opción, como esta:
Este mensaje contiene algún texto en [font="Helvetica"]una fuente denominada Helvetica[/font]...
Códigos BB personalizados
Por añadidura a los códigos BB estándar que vienen con XenForo, pueden definirse los propios.
El gestor de códigos BB personalizados lista todos los códigos BB personalizados disponibles en el foro y permite crear los propios. También pueden eliminarse o desactivarse temporalmente utilizando los gadgets intercambiador y de eliminación aquí dfisponibles.
Pueden importarse y exportarse varios códigops BB personalizados utilizando los controles de arriba de la página del gestor.
Editor del código de códigos BB personalizados
Haciendo clic en el nombre de un código BB personalizado nos llevará al editor para ese código BB, en el cual puede diseñarse con exactitud la función que se desea para ese código BB.
En este ejemplo crearemos un código BB que dibuje una caja sobre el texto etiquetado permitiendo al usuario especificar un color para la caja.
Denominaremos 'box' al código BB y pretende poder convertir este texto:
Entrada: [BOX="red"]Este es cualquier texto en una caja roja[/BOX]
En este HTML:
Salida: <div style="background-color: red">Este es cualquier texto en una caja roja</div>
Etiqueta del código BB
Escribir la palabra clave que lanzará aquí el código BB. En este ejemplo es 'BOX'.
Título
Llameremos a esto 'Caja coloreada'
Modo de reemplazo
En nuestro ejemplo utilizaremos un reemplazo simple.
Puede usarse una devolución de llamda de PHP para reemplazos más complejos que conlleven la ejecución de código PHP que indique cómo debe ser la salida HTML. Esto no es más que una opción para desarrolladores. Si se utiliza, la devolución de llamada debe especificarse utilizando los campos Clase y Método aquí provistos.
Parámetro soportar opción
Como precisamos que el usuario defina un color, aquí debemos utilizar Sí.
Si el código BB que se define no la necesita o no debe soportar opción, puede configurarse esto a Opcional o No.
Reemplazo HTML
Aquí introduciremos el HTML que reemplazará a nuestro código BB cuando se utilice. Precisaremos utilizar las fichas especiales {option} y {text} que representan el valor de la opción y del contenido del texto, respectivamente.
Nuestro reemplazo HTML será como sigue:
<div style="background-color: {option}">{text}</div>
Icono en el editor
También puede desearse que los usuarios hagan un simple clic en un botón en su editor de texto para insertar este código BB. Si es así, hay que especificar un icono de la fuente Awesome o una imagen para que la utilice el botón, ya que de otro modo, dejar esto en Ninguna, hará que el código BB solo esté disponible mediante tecleo directo.
Ejemplo de uso y salida
Úsense estas cajas para proveer ejemplos de uso del código BB personalizado y de cómo será la salida. Pueden utilizarse los ejemplos de arriba en la Entrada/Salida.
Permitir en firmas este código BB
Algunos códigos Bb son grandes y desagradables y no se recomienda su uso en firmas de usuario. Desmarcando esta casilla se evita que pueda utilizarse en las firmas de los usuarios.
Opciones avanzadass
En la sección de opciones avanzadas se encuentran controles que permiten refinar el código BB.
Opción coincidir con expresión regular
Permite definir una expresión regular para limitar los valores aceptables como valor de la opción. En nuestro ejemplo, podríamos utilizar una expresión regular que permita solo caracteres alfanuméricos, por lo que sólo podrían utilizarse colores con nombre.
Dentro de este código BB
Las opciones de aquí permiten evitar el análisis de emoticonos en el código BB, para evitar la conversión de los saltos de línea, para desactivar el auto-análisis de hiperenlaces y para detener el análisis de cualquier otro código BB que forme parte del texto de este código BB.
Quitar saltos de línea tras
Puede utilizarse esta opción para evitar que montones de espacios en blanco queden a la izquierda detrás de utilizar el código BB. Con un valor de 0, no se premiten saltos de línea adicionales, por lo que la salida HTML deberá tener en cuenta esto.
Reemplazo de texto en email HTML
Puede que se quiera una salida diferente como formato final para un email en HTML email o en texto plano. Úsense estas cajs para definir salidas alternativas, utlizando {option} y {text} como antes.
Códigos BB de sitios media
Los códigos BB de sitios media son un medio por el que los enlaces a contenido alojado en sitios externos, como YouTube o Instagram, pueda convertirse en media incrustada automáticamente en los mensajes de los usuarios.
XenForo viene con una cloección de códigos BB de sitios media predefinidos para sitios como Facebook, Twitter, Flickr y Spotify.
Los enlaces publicados en los mensajes de los usuarios se procesarán automáticamente y convertidos en media incrustada si la opción Auto incrustar enlaces media está activada en la sección Incrustado de media del sistema de opciones de XenForo.
Gestor de códigos BB de sitios media
En el gestor de códigos BB de sitios media pueden verse todos los sitios media disponibles y pueden desactivarse temporalmente cada uno de ellos con un solo clic en el gadget intercambiador. También pueden eliminarse o agregarse sitios media.
Haciendo clic en el nombre de un código BB de sitio media se cargará el editor para ese sitio.
Editor de códigos BB de sitios media
Funcionan extrayendo datos de la URL publicada por el usuario y trasladándolos a un fragmento de HTML que puede utilizarse para incrustar la media referencia en el mensaje. En algunos casos, solo es el caso de tomar una parte de una URL e insertarla en el HTML, pero en otros se precisarán más pasos para convertir la URL en HTML utilizable.
Esto puede ser un proceso complejo, pero para el propósito de este documento veremos un relativamente simple ejemplo: Pinterest, que es simple porque las URLs de Pinterest contienen toda la información que se precisa para incrustar en HTML.
Coincidencia de URLs
En esta caja definiremos todas las URLs que se desean convertir en HTML incrustado. Cada URL va en una línea separada e incluirá la ficha {id}, que representa a los datos que nos interesan.
En el caso de Pinterest, el dato siempre es un número, por lo que puede extenderse el {id} a {id:digits}, que forzará un patrón para coincidir solo con números. Las otras extensiones disponibles son {id:alphanum}, que limita la coincidencia solo a números y letras. Puede utilizarse un * como comodín para que las URLs coincidan con cualquier cosa.
Las Opciones avanzadas son una configuración que permite la coincidencia de URL con expresiones regulares. Si se utilizan estas, cada línea debe definir delimitadores e interruptores.
Plantilla incrustada
Se utiliza esta caja para definir el HTML que saldrá si se encuentra una URL coincidente. Puede utilizarse cualquier HTML, pero resulta una buena idea envolver la salida en el código <div class="bbMediaWrapper"><div class="bbMediaWrapper-inner"> que se utiliza en la mayor parte de los sitios predeterminados de XenForo, ya que esto maneja el estilado para que coincida con el del resto del sitio,
En el HTML, debe utilizarse el para referirse al valor {id} captado por la URL coincidente. También puede utilizarse o si se han utilizado estas extensiones para la coincidencia de URLs.
En el caso de Pinterest, la sección importante es el atributo href, en el que se define la fuente del enlace y que suele ser https://www.pinterest.com/pin/, haciendo uso de los datos tomados de las URL coincidente.
oEmbed
oEmbed es un formato abierto que permite a los sitios devolver información sobre una URL, incluyendo HTML incrustado. En algunos casos, cuando no puede construirse directamente desde la URL el HTML incrustado, es posible utilizar oEmbed para consultar al sitio por los datos oEmbed y generar el HTML por esta vía.
Para utilizar oEmbed, debe conocerse el punto final de la API de oEmbed para el sitio que se está consultando y de qué formato de URLs espera obtener su API.
Por ejemplo, el punto final de la API oEmbed de Flickr está en https://www.flickr.com/services/oembed y su esquema de URL es https://flic.kr/p/, en donde (otra vez), representa los datos que coinciden con las URLs.
Finalmente, debe elegirse entre ejecutar o no código Javascript devuelto por el sitio de oEmbed junto con el HTML incrustado. Si se decide no permitir la ejecución de Javascript foráneo, debe manejarse cualquier requerimiento de inicialización del HTML incrustado con rutinas propias.
Más información sobre oEmbed se encuentra en oEmbed.com, incluyendo un listado de sitios actualizado regularmente que utilizan oEmbed.
Opciones avanzadas
A veces, incluso se precisa un procesamiento adicional para obtener HTML incrustado funcional. En estos casos, hay disponible una devolución de llamada de PHP tanto para propósito de coincidencias como de incrustación.
Se escapa al punto de mira de esta documento el como trabaja esto con exactitud, aunque los dsarrolladores podrán inspeccionar el código de sitios en una instalación predeterminada de XenForo y poder utilizar devoluciones de llamada para coincidencias e incrustación.