BBcode (Bulletin Board Code) es un pequeño lenguaje usado en los foros para darle onda a los mensajes, pudiendo poner negritas, itálicas, y demás.
Como no tiene mucho que ver con html, es mas «sano» al nivel seguridad con los datos de entrada, ya que no es lo mismo aceptar este lenguaje que html, no solo esto, sino que también no dejamos en riesgo nuestro elegante diseño con tags o estilos que son realmente desastrosos.
Les contaré mi experiencia y solución al tema:
El Problema
Como comentaba, el problema principal son los datos de entrada/salida; para lo que en esto BBcode es excelente, ya que nos limita todo a solo lo que necesitemos. Los tags más comunes son:
[b]Negrita[/b]
[u]Subrayado[/u]
[i]Cursiva[/i]
[color=#FF0000]Rojo[/color]
[color=blue]Azul[/color]
[img]Ruta_de_la_imagen[/img]
[url]uri[/url]
[quote]texto[/quote]
código
Y varios más. Lo que se hace es, darle al usuario este lenguaje para formatear su texto, y luego nosotros lo reemplazaremos con html válido para el browser, ya que de por si BBcode solo no puede hacer nada.
El tema es que entré en la necesidad de hacer un editor de estos, ya que los editores que venia usando para esta tarea no me servían.
Si bien no es muy complicado, si requiere tiempo que muchas veces no tenemos, entonces me lance a buscar alguna alternativa free que me saque del apuro.
La solución
Entre los destacados encontre a jTagEditor, el cual me pareció muy bueno, sobre todo por que usa el excelente framework jQuery del que soy fan.
Si bien lo tuve que tocar bastante, por ejemplo para que me soporte varios textareas o me tome el id que estaba usando en esa pagina con js, al llegar el momento de la prueba con el cliente, al mismo no le gustaba por que no editaba lo que veía, el no quería ver BBcode, sino Html formateado, aunque por atrás sea BBcode.
Pensándolo es algo que ya es un poco más complicado porque necesitamos crear el document editable y hacer la ida y vuelta de html a BBcode y biceversa entre ambos modos del editor, así que seguí buscando y me tope con un pluging de TinyMCE el cual prometía mucho.
Así que lo bajé, lo toqué un poco, y logré esto, que es lo que necesitaba.
Realmente destaco nuevamente que lo toque poco, recuerdo haber agregado a [url] la dirección como propiedad y no como valor (en vez de [url]page[/url] que quede [url=page]texto[/url]), limitar algunas cosas (por ej con los links) aparte de modificar un poco la apariencia para que se adapte a mi backend. Y le agregue un xss para prevenirme del lado del servidor (php), y un php para parsear dicho BBcode en pantalla.
Quienes quieran el código fuente no tienen más que pedirlo ya que es una adaptación tomando dos excelentes proyectos; lo mismo para la parte del php.
Hola amigo un gusto haber encontrado tu blog. muy interesante las notas. y bueno me gustaria saber si me podrias facilitar este codigo.. espero se pueda. me gustaria revisarlo.. Bueno mucha suerte.. saludos..
Este es mi correo por siaca. [editado]@hotmail.com
Hola Jorge, te dejo un rar con todo lo que se ve en pantalla de mi ejemplo, necesitarás php para correr el archivo que levanta el formulario al hacer submit: http://estudiowas.com.ar/downloads/bbcode.rar
PD: me tomo la molestia de editarte tu segundo comentario borrandote tu email para que no te lluevan spams.
Saludos, lo dejaré unos días en esa dirección.
¡Hola!
Me acabas de salvar la vida, llevo mucho tiempo buscando algo así, y ya me había resignado al típico editor con el bbcode visible ya que no tengo ni tiempo ni ganas de implementar uno totalmente a mano.
Saludos
Veo que el link ya no accede al código, me podrías mandar el código¿?, y si no es mucho pedir, me dices los autores, para agregarlos en la lista de autores.
Gracias de ante-mano.
Yo también estoy interesado en el código, me lo podrías enviar?
Un saludo, Rafael
Adrian, Rafael, ahí he puesto nuevamente online el rar. Adrian, en cuanto a los autores los nombro todos en el Post.
Saludos.
Gracias por publicar de nuevo el archivo
Acabo de descomprimir el fichero y al aparecer está dañado, podrías echarle un vistazo
Si, solucionado!
gracias de nuevo
Nicolás, muchas gracias por el script.
Es EXCELENTE
Un abrazo
Estoy tratando de impedir que se pueda pegar texto html en el editor, es decir que por defecto se pegue como texto plano.
Alguna idea?
genial… simplemente, genial!
Hola!
Wue gusto haberme topado con tu blog, en especial con esta entrada. Estaba buscando un editor BBCode pero no encontraba.
Estoy desarrollando un CMS, y la verdad es que hasta un tiempo atrás, para los contenidos como noticias usaba tinyMCE para el cuerpo de la noticia, en este caso. El problema es que no me gusta incorporar código html dentro de la base de datos, intento en lo posible no usar html en la base de datos.
Es justo lo que necesitaba!
Saludos y gracias por el blog, está buenísimo.
Gracias por compartir esto con nosotros…me ayudo mucho!, las otras entradas también están interesantes. Groso!
PD: Aclaro, si bien ya lo está hecho en el post por el autor del mismo, que parte, gran parte de este editor es tinyMCE.
David (o alguien), han podido ver el tema de poder pegar en texto plano? Seria un buen aporte!!, he visto en otro editor que hace esto, pero el bbcode es una pasion y no hay mejor opcion que esta por lo que he visto.
brillante amigo, me puedes facilitar ese código
Hola Thomas, la url de descargar está en mi primer comentario, es: http://estudiowas.com.ar/downloads/bbcode.rar
Saludos.
si yo quiero el codigo jejejej porfavor.. me seria muy util ya que tambien estoy trabajando un cms de noticias y para que los escritores puedan darle formato o si tienes algunas otras opciones y me pudieras pasar, serian de gran aayuda gracias
Muchas gracias, llevaba tiempo buscando algo así
Hola, Nicolas muy buen post, tengo una duda como hago si quiero introducirle iconos al editor ??? algo como al escribir :D, muestre una carita feliz y cosas asi…
Muchas Gracias!