Hoy traigo carne fresca y gratis. En muchos proyectos web surge la imperiosa necesidad de incluir un editor de texto enriquecido del tipo WYSIWYG, acrónimo de «What You See Is What You Get», que en nuestro idioma, tan rico en matices y significados, sólo quiere decir: «tal cual».
Lo poderoso de Summernote reside en que utiliza el archiconocido framework: Twitter Bootstrap.
Aunque Summernote aún está en pañales (en las próximas semanas estará completamente listo) ya podéis instalarlo y usarlo. Es tan sencillo de instalar que dan ganas de llorar. De alegría, claro.
Minitutorial: cómo instalar Summernote
En la documentación lo explican con bastante detalle (en la versión actual hay un par de erratas sintácticas, andad con pies de plomo). Os dejo los pasos clave:
Lo primero es asegurarnos de que hemos declarado un DOCTYPE de HTML5:
<!DOCTYPE html>
<html lang="es">
...
</html>A continuación importamos las librerías necesarias (todas open source, tranquis):
- jQuery
- Bootstrap. Os recomiendo fervientemente la versión 3.
- Font-Awesome (a partir de la versión 4)
Por último importamos el fichero CSS y JavaScript principales de Summernote.
El resultado debe parecerse a esto (ojo con la ruta a los ficheros):
<!-- DEPENDENCIAS -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- SUMMERNOTE -->
<link href="summernote.css" />
<script src="summernote.min.js"></script>Ya casi está. Ahora hay que insertar en algún lugar del <body></body> una caja como la siguiente:
<div id="summernote">Este es mi editor WYSIWYG</div>Podéis usar el selector de jQuery que queráis. Lo importante es que la inicialización, en el ready de vuestro HTML, sea congruente con el mismo.
He aquí el último paso:
$(document).ready(function() {
$('#summernote').summernote();
});Pero hay mucho más…
Hay mucho más, de hecho. Incluye una API que permite personalizar la barra de herramientas (toolbar), soporta callbacks de distintos eventos, permite una integración fácil y rápida con muchos servidores (PHP, Django, Node.js, Ruby on rails…) .
La API también soporta internacionalización de las cadenas de texto. Ahora mismo el fichero para castellano no está disponible, aunque lo estará en breve.
Una de las tonterías que más me ha gustado es que permite redimensionar el área del editor de forma similar a como se haría en un textarea, arrastrando desde un extremo (para que aparezca hay que declarar la propiedad «height» de la API).
El resto dejaré que lo descubráis vosotros. Mientras tanto puedo deciros que, después de haber probado varios editores WYSIWYG (gratuitos) éste es el que más me ha gustado. ¡Que lo disfrutéis!
Enlaces relacionados:
- Summernote | Documentación
- Summernote en Github