unijimpe

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.

<link rel="stylesheet" href="css/MooEditable.css" />
<script type="text/javascript" src="js/mootools.js"></script>
<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.

<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.

window.addEvent('domready', function(){
	$('content').mooEditable();
})

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.

[download id=»27″ autop=»false»]

Posts Relacionados

• Swiff: Mootools Flash Plugin
• Plugin ortográfico WordPress
• Editores HTML Web Online
• Introducción a Mootools
• Rollover de Imágenes con Mootools