WYSIWYG BBCode Editor

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]
[code]código[/code]

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.