La vida es más sencilla con TinyMCE

Como muchos de vosotros sabréis trabajo como Administrador de Sistemas en una empresa que tiene entre otra cosas un periódico. Hace unos meses me dijeron algo así: “¿Por qué no podemos poner en los artículos de la web cursiva, negrita y colores?”. En aquel entonces sabía que existían algunas librerías y plugins que permitían hacer eso, pero para colmo de males en aquel entonces no tenía el más mínimo tiempo libre para estar haciendo experimentos… hasta hoy.

Después de investigar un rato y haber encontrado varios editores tipo “lo_que_ves_es_lo_que_obtienes” para poner dentro de una cajita en un script HTML o PHP seguía sin haber nada que me hiciera exclamar bien alto ¡GUAUUU!.. hasta que encontré TinyMCE. Vaya si grité ¡¡GUAUUU!! pero no porque la librería fuera enorme o impresionante; ¡es que es minúscula! Como su propio nombre dice, Tiny significa pequeñajo en inglés, y es lo que os vais a encontrar: una librería pequeña pero tremendamente eficiente que os permitirá convertir las cajas tipo TextArea de una página HTML en auténticos procesadores de texto que guardarán el texto insertado en código HTML listo para ser usado, con sus colores, negritas, etc etc… ¿Y qué se necesita? Poca cosa, tener activado JavaScript.

Lo primero que hay que hacer para tener esta maravilla funcionando es descargársela de www.tinymce.com. Veréis que hay varias versiones, una incluso para ser usada desde JQuery, pero no es nuestro caso, así que diréctamente coged la versión más nueva que haya y que no diga cosas raras. Lo siguiente es descomprimir el archivo (puede venir en zip o tgz) y subir el directorio tinymce que encontraréis a vuestro espacio web. Tras eso cread un documento en HTML como el siguiente y subidlo..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>TinyMCE Test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  <script type="text/javascript" src="tiny_mce/tiny_mce.js"> </script>  <script type="text/javascript">  tinyMCE.init({  mode : "textareas" });  </script> </head> <body>  <textarea name="content" cols="50" rows="15">Esta sera la cajita editora</textarea&gt </body>  </html> 

Abrid el navegador y apuntar a la dirección donde habeis subido el archivo y vereis una fantástica cajita con botones para editar texto como por ejemplo poner en negrita, itálica, etc… Y lo mejor de todo es que el texto que genera es completamente html, con sus código de color CSS incluídos. Una maravilla…