Editor textarea de Mootools

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();
})

Ver ejemplo en funcionamiento