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

You might also like

Generales 0 Comentarios

Todo está en el código fuente

Desde hace años el software se ha instalado en la vida de las personas. De manera que la vida se está tornando mas virtual con el paso del tiempo. De

Desarrollo 0 Comentarios

Herencia fácil de plantillas en PHP ¡y sin volver al Paleolítico!

Cuando ya has experimentado un framework (como hablábamos en el artículo anterior), volver a programar “a pelo” en cualquier lenguaje se antoja como volver al paleolítico y picar piedra en

Cultura 1Comments

DrupalCamp Spain 2014

Este fín de semana la capital del Turia ha acogido a la DrupalCamp Spain 2014, a la cual fuí en calidad de ponente. No puedo dejar pasar la oportunidad de

7 Comentarios

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

  2. 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(”);

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

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

Deja un comentario