Summernote, un potentísimo editor WYSIWYG en Bootstrap

Summernote, un potentísimo editor WYSIWYG en Bootstrap

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:

Previous ¡BorrowBITs os desea un feliz año 2014!
Next Haz que tu smartphone sea "inteligente", usa Tasker (I)

About author

Angel
Angel 174 posts

Siempre quise ser inventor y escritor: por lo primero me hice ingeniero, y en cuanto a lo segundo, escribo aquí de vez en cuando sobre telecomunicaciones y tecnología. Me gustan los robots, los perretes y los libros (analógicos).

View all posts by this author →

You might also like

Tecnologia & Ciencia

Framework: ¿Por qué es mejor usarlos?

Un Framework es un conjunto de librerías y conceptos preparados para ser utilizados en tus proyectos. Te olvidarás de muchos problemas tediosos, que otros programadores ya han solucionado. Soluciones que

Desarrollo 1Comments

¿Cómo hacer un Servidor HTTP sencillo?

Si estás desarrollando una aplicación destinada a la gestión de contenidos o al intercambio de información entre usuarios, puede que hayas tenido la necesidad de tener uno o varios servidores

Desarrollo 2 Comments

Prototipado online en 5 minutos con Mockflow

El otro día me llama un cliente para pedirme presupuesto sobre una aplicación web. Le pregunto para cuándo y responde que para ahora mismo, wireframes incluidos. En condiciones normales lo

9 Comments

  1. alexs
    marzo 25, 19:30 Reply

    buen día como puedo guardar el contenido multimedia que meta (imagenes / videos) para poder almacenarlos en la base de datos

  2. Humberto Jimenez
    junio 21, 01:56 Reply

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

  3. Lio
    diciembre 12, 03:41 Reply

    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!

    • Angel
      diciembre 12, 11:58 Reply

      Prueba esto, crack:

      $(“#id_texto_es”).code(”);

  4. rafa
    diciembre 08, 00:22 Reply

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

    • Angel
      diciembre 08, 12:48 Reply

      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/

  5. migluna
    abril 09, 17:35 Reply

    Como puedo tener dos o mas summernote al mismo tiempo

    • Angel
      abril 11, 14:32 Reply

      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:

      Editor 1
      Editor 2

      $(document).ready(function() {
      $(‘#summernote1’).summernote();
      $(‘#summernote2’).summernote();
      });

      Cuéntame si te funciona. Un saludo.

Leave a Reply