Al diseñar un espacio dentro de una web en el que el usuario deba ingresar una cantidad media o alta de texto (cuadro de texto o textarea), debemos darle la posibilidad de insertar tags html, bbcode, etc. utilizando botones.
Nos referimos por ejemplo a un cuadro de texto para escribir un artículo en un blog, escribir un mensaje en un foro o enviar un mail. El impacto de usabilidad que se logra es muy alto.
A su vez, existen dos modalidades para la inserción de tags:
- Insertar un tag en el lugar en que está posicionado el cursor -tag de apertura o cierre según corresponda-, o
- Seleccionar un fragmento del texto e insertar el tag de forma envolvente.
El editor más popular y completo que conozco para lograr esto es TinyMCE. Sin embargo, en algunas ocasiones podemos necesitar algo más liviano o personalizable, donde tener mayor control funcional y de diseño.
Voy a compartir con ustedes un sencillo código que desarrollé para el sitio Live! implementando esta funcionalidad. Utilizo Javascript, con dos funciones tomadas de los sitios http://motyar.blogspot.com y http://blog.vishalon.net según se encuentra documentado en el mismo código. El uso de jQuery es circunstancial, podría sustituirse sin mayores complicaciones por Javascript puro.
Screenshot:
Aprecio cualquier comentario 
