TinyMCE

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…

Life is easier with TinyMCE

As you all probably know I work as a System Administrator on a company that has a newspaper. Several months ago somebody asked something like: “When will we have on the web a system to put bold, italic and colours inside the articles?” I knew there were libraries and plugins to do that, but until today  I din’t have the time to make such experiments… However, the day has arrived..

After “webing” a little I found a couple of “wysiwyg html editor” to put inside an HTML/PHP document, but nothing that made me say “WOWWW!!” until I found TinyMCE… yes, I said “WOOW!” but not because it’s great but because it’s tiny!!! Yes, as its own name says this little, tiny, ridiculous library permits yourself to convert an HTML TextArea on a fully wordprocessor… What do you need? JavaScript!! Nothing more.. so let’s activate some “boxes” with editors inside…

First of all, go to www.tinymce.com and download the package. As you can see there are several versions, even one which works fine using JQuery over it, but this is not the case. Upack the archive and upload the content of the tinymce directory inside your web folder. After that create an html document and put this inside it…

<!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">This will be inside your box.</textarea&gt </body>  </html> 

Go to your browser and point where your document is saved and… yes! you’ll see a wonderfull “textarea box” where you can put your text in bold style and many things more…