Edito HTML en Mootols

domingo, octubre 11, 2009
COMPARTE EL POST

mooeditable

Si andan buscando uno de eso editores que luego ven en muchos sitios donde puedes cambiar el color del texto y agregar imágenes aquí les traigo uno.

MooEditable es un editor de texto escrito en Mootools. Con esta librería podemos convertir nuestras cajas de texto o textareas en editores HTML con solo utilizar pocas líneas de código javascript.

Este editor es compatible con Internet Explorer 6/7/8, Firefox 2/3, Opera 9/10 y Safari 3/4, es ligero comparado con otras librerías como TinyMCE, se pueden personalizar los iconos y con una interfaz limpia

Tiene las opciones básicas para formatear texto como: negrita, cursiva, subrayado, tachado, listas además soporte para incluir, imágenes, enlaces, archivos flash y finalmente se pueden incluir las acciones para deshacer y rehacer.

Como Utilizar MooEditable
Para su funcionamiento se requiere primero Mootools, entonces primero se debe incluir el archivo mootools.js y MooEditable.js, también es necesario incluir la hoja de estilos MooEditable.css el cual incluirá los estilos e imagenes necesarias para el funcionamiento de la librería.

  1. <link rel="stylesheet" href="css/MooEditable.css" />

  2. <script type="text/javascript" src="js/mootools.js"></script>

  3. <script type="text/javascript" src="js/MooEditable.js"></script>

El siguiente paso es crear nuestro formulario en el cual debemos insertar un tag textarea, es necesario aplicarle un estilo a este tag para definir el ancho el cual se utilizará para crear el editor.

  1. <textarea name="content" id="content" rows="10" style="width: 400px;"></textarea>

Finalmente asignamos el método mooEditable al elemento que contendrá el editor de texto. En nuestro caso se lo asignamos al elemento content que el textarea que hemos creado.

  1. window.addEvent('domready', function(){

  2.     $('content').mooEditable();

  3. })

Con lo cual obtenemos nuestro editor funcionando, pueden ver el resultado en mooeditable. Hay muchas opciones para personalizar al detalle este editor, para conocer mas acerca de las opciones pueden leer la documentación que viene en el archivo de descarga

Posts relacionados

¡Síguenos en Twitter!


Deja tu comentario