Todos hemos visto en innumerables ocasiones este tipo de editores de texto a la hora de escribir noticias en blogs, en foros o simplemente al escribir un comentario en cualquier página.
Uno de los más conocidos y fáciles de implementar es TinyMCE.
TinyMCE es un editor de texto que nos permite escribir texto formateándolo a nuestro gusto. Nos permite, por ejemplo, escribir subrayado, en negrita, en colores o simplemente elegir el tamaño de letra. Está basado en javascript y lo que hace es convertir un textarea en un editor HTML.
Para ello, lo primero que necesitamos es la librería javascript que lo hace. Podemos descargarla del siguiente enlace.
A continuación debemos incluirla en nuestra página web de la siguiente manera:
<script type="text/javascript" src="js/tiny_mce.js"></script>
Para el ejemplo utilizaremos una página HTML muy simple:
<head> </head <body> <form id="formulario" action="envia.php" method="post"> <textarea cols="50" rows="15"></textarea> </form> </body>
Lo siguiente que debemos hacer es convertir todos los textarea en editores HTMl de tinyMCE. Para ello incluimos el siguiente script:
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
Y de esta forma tendremos nuestro editor HTML listo para funcionar de una forma sencillísima.
Además de todo esto, este script nos permite elegir las opciones que queremos mostrar, si queremos permitir que se cambie el tamaño de letra, el color, subrayados,etc.
Son muchas las opciones que nos ofrece pero yo os voy a enseñar alguna de ellas. Podeis obtener toda la documentación de ellas en el siguiente enlace. Para realizar esto debemos incluir el script de la siguiente manera:
<script>
tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_buttons1_add : "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,image,cleanup,help,code",
theme_advanced_buttons1_add : "hr,removeformat,visualaid,separator,sub,sup,separator,charmap",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_font_sizes : "10px,12px,14px,16px,24px",
theme_advanced_text_colors : "FF00FF,FFFF00,000000"
theme_advanced_default_foreground_color : "#FF00FF"
});
</script>
A continuación os dejo el código completo del ejemplo en que se basa este artículo:
<head>
<script type="text/javascript" src="js/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head
<body>
<form id="formulario" action="envia.php" method="post">
<textarea cols="50" rows="15"></textarea>
</form>
</body>
Espero que os haya servido de ayuda.