Angel H.
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
BorrowBITs
aroqui
Darío L.M.
Vicente
Rafa M.
Alejandro
plfgavilan
Como puedo tener dos o mas summernote al mismo tiempo
Migluna, no he probado si funciona, pero a priori necesitarías crear un identificador propio para cada uno de los summernote e inicializarlos por separado. Ejemplo:
$(document).ready(function() {
$(‘#summernote1’).summernote();
$(‘#summernote2’).summernote();
});
Cuéntame si te funciona. Un saludo.
como puedo obtener el contenido de la caja de texto en una variable para almacenarla en una base de datos y al revés es decir como incluir lis datos de la bbdd a una caja con summernote???
Usando jQuery sería tan fácil como aplicar el método html() sobre el div de summernote. Por ejemplo:
var contenido = $( «#summernote» ).html();
La variable contenido la puedes pasar en la consulta insert de la base de datos. Y de forma análoga, si quieres renderizar el contenido de una variable dentro de cualquier caja de texto o div, podemos hacelro así de fácil:
$( «#summernote» ).html(contenido);
Tienes más info sobre el método html() de jQuery aquí: http://api.jquery.com/html/
Estimado, una consulta, una vez que hago lo siguiente:
$(«#id_texto_es»).summernote({
toolbar: [
// [groupName, [list of button]]
[‘style’, [‘bold’, ‘italic’, ‘underline’, ‘clear’]],
[‘fontsize’, [‘fontsize’]],
[‘color’, [‘color’]],
[‘insert’, [‘link’]],
[‘para’, [‘ul’, ‘ol’, ‘paragraph’]],
[‘misc’, [‘codeview’, ‘undo’, ‘redo’]],
],
lang: ‘es-ES’,
placeholder: «Texto»,
height: 200, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
});
El editor funciona perfecto, pero al grabar mi formulario, hago la limpieza de campos de la siguiente manera:
$(«#id_fuente_es»).val(»);
Pero el .val(»); no me funciona para $(«#id_texto_es»)
Ud sabe que debería utilizar para limpiar el campo?
Gracias!
Prueba esto, crack:
$(«#id_texto_es»).code(»);
Buen dia, tengo un problema con summernote en angularjs y te agradeceria mucho tu apoyo, el problema es el siguiente: no me reconoce el elemento dentro de angular
Unhandled Promise rejection: Template parse errors:
‘summernote’ is not a known element:
1. If ‘summernote’ is an Angular component, then verify that it is part of this module.
2. If ‘summernote’ is a Web Component then add «CUSTOM_ELEMENTS_SCHEMA» to the ‘@NgModule.schemas’ of this component to suppress this message. («
xcx
buen día como puedo guardar el contenido multimedia que meta (imagenes / videos) para poder almacenarlos en la base de datos
Buen día Ángel! Este editor es excelente! ¿Sabés cómo seleccionar qué herramientas quiero en la toolbar y cuáles no? Gracias!
$('#summernote').summernote({toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
});
Aquí tienes un ejemplo de cómo se configura la toolbar. Puedes encontrar más aquí: summernote.org/deep-dive/#customization