Summernote – Editor WYSIWYG súper simple con Bootstrap 5

Name: Summernote – Editor WYSIWYG súper simple con Bootstrap 5
Brand: Jose Aguilar
SKU: joseaguilarblog-7669
Availability: InStock
Rating: 5 (2 reviews)

He quedado bastante sorprendido con el plugin Summernote que te va a permitir implementar en tus desarrollos un editor de texto enriquecido bastante liviano pero con las opciones más que suficientes para sorprender.

En su página oficial se define como Super Simple WYSIWYG Editor en Bootstrap Summernote es una biblioteca de JavaScript que lo ayuda a crear editores WYSIWYG en línea.

En este artículo te voy a enseñar como hacer funcionar Summernote con Bootstrap 5.

Principales ventajas

Fácil de instalar.
Editor personalizable.
Ejemplos a tu disposición en la página oficial de Summernote.
El código está abierto y se puede descargar.

Características

Admite Bootstrap 3,4 y 5
Liviano (js+css: 100Kb)
Interacción de usuario inteligente
Funciona en todos los navegadores principales: Safari, Chrome, Firefox, Opera, Edge e Internet Explorer 9+
Funciona en todos los principales sistemas operativos: Windows, Mac OS, Linux

¿Cómo descargar Summernote?

La forma más rápida de conseguir Summernote es descargar las versiones precompiladas y minimizadas de los ficheros CSS y JavaScript. en los que no se incluye la documentación ni archivos de código fuente original.

En la página oficial puedes descargar estas versiones pulsando en el botón rojo:

https://summernote.org/getting-started/#installation

La carpeta tal cual te la descargas, agrégala en la raíz de tu proyecto.

Es posible agregarla en otro lugar para tu organización pero luego debes cambiar las rutas en el momento de la inclusión y no hacerlo igual que en la demo.

¿Cómo instalar Summernote en tu proyecto?

En la cabecera de tu archivo o plantilla HTML o dentro de la etiqueta <head> incluye lo siguiente:

Source code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="summernote/summernote-lite.css">
<link rel="stylesheet" href="summernote/summernote-bs5.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="summernote/summernote-lite.js"></script>
<!--<script src="summernote/summernote-bs5.min.js"></script>-->

Debido a que queremos implementarlo con Bootstrap 5, agregamos los archivos CSS y JavaScript del Framework, agregamos la hoja de estilos de Summernote y también la especialización para Bootstrap 5.

Cargamos la última versión de jQuery ya que el plugin Summernote depende de jQuery.

Y, por último, incluimos el fichero JavaScript de Summernote + la especialización de Bootstrap 5.

Fíjate bien que la especialización de Bootstrap 5 está comentada ya que genera algunos problemas como, por ejemplo, que no permite abrir los desplegables del editor. Entiendo que está por revisar.

El archivo styles.css contiene los estilos especiales de la demo.

Ahora tan solo nos quedaría hacer la llamada al plugin en la misma cabecera o pie de página:

Source code

<script>
$(document).ready(function(){
    $('#summernote').summernote({
        height: 200,
    });
 
    $('span.note-icon-caret').remove();
 
    $('.note-editable').css('background', '#fff');
});
</script>

Hago una llamada simple al plugin indicando la altura deseada y seguidamente aplico 2 ajustes para remover las flechitas dobles que se agregan al editor y para agregar un fondo blanco al editor en pantalla completa. Entiendo que son problemas que se deben resolver usando Bootstrap 5.

Probando con Bootstrap 4 he podido verificar que todo está bien y no se requieren de estos ajustes.

Campo de texto enriquecido

Con todo lo anterior agregado en tu cabecera, ya puedes crear un <div> o <textarea> con id=»summernote» para que pueda capturar las características del plugin para el caso del ejemplo:

Source code

<textarea name="content" id="summernote" class="form-control">
    <em>la</em> <u>descrpción</u> <strong>aquí</strong>
</textarea>

Resultado

En pantalla deberías ver un simple editor enriquecido como la imagen siguiente:

Presentación de Summernote

Ver demo Descargar

Conclusiones

Ha resultado fácil , ¿verdad? En próximos artículos tengo pensado hablar más a fondo sobres este plugin ya que, a pesar de ser muy liviano, tiene una API bastante extensa y se pueden llegar a hacer funciones muy interesantes que permiten hacer que el plugin funcione más a tu gusto.

He tenido experiencia en desarrollo de aplicaciones a medida usando otros editares tales como Ckeditor o Tinymce.

Summernote lo noto más liviano y moderno. Me ha dejado sorprendido y he tenido una experiencia muy agradable.

¿Tu lo has probado? ¿Qué opinas?