En estos días estuve buscando un editor HTML o un editor WYSIWYG, parecido al editor de WordPress pero de una manera muy simple. Las siglas hacen referencia a What you see is what you get, que es algo como: lo que ves, es lo que obtienes.

Puedes probar el resultado final en el siguiente enlace: https://parzibyte.github.io/ejemplos-javascript/wysiwyg/

Esto es debido a que el HTML resultante, al momento de ser mostrado en otro lugar, se verá igual que en el editor.

El punto es que estuve buscando un editor WYSIWYG para integrar con JavaScript en el navegador web, de manera simple y rápida, permitiendo alinear el texto, insertar imágenes y obtener el HTML resultante.

Después de buscar y revisar las licencias (está disponible bajo la licencia MIT), encontré summernote y lo quiero recomendar así como mostrarte cómo usar ese editor de HTML en tu web.

Editor WYSIWYG con JavaScript

Veamos cómo incluir este editor HTML en nuestros sitios web. Te aviso desde ahora que el editor necesita jQuery y Bootstrap para funcionar.

Primero vamos a descargar el JS y CSS necesario, yo he ido a la página del proyecto: https://summernote.org/getting-started/ y he hecho clic en Download compiled. Después de extraer el zip, hay que copiar los siguientes archivos a la raíz de nuestro proyecto:

1. fonts: es un directorio que contiene los iconos
2. summernote-bs4.min.css: los estilos del editor, compatible con Bootstrap 4
3. summernote-bs4.min.js: funcionamiento del editor, compatible con Bootstrap 4

Nota: al momento de escribir el post, supuestamente summernote es compatible con Bootstrap 4 y 5, pero no encontré un archivo con la terminación bs5, así que mejor he decidido usar bs4; desconozco si summernote.min.css es la versión compatible con Bootstrap 5.

Además de copiar los archivos hay que referenciarlos en la página donde se van a usar. En mi caso:

<link href="./summernote-bs4.min.css" rel="stylesheet">
<script src="./summernote-bs4.min.js"></script>

Dependencias

Como lo dije anteriormente, vas a necesitar Bootstrap, jQuery y Popper. No me mires mal a mí, ya que jQuery es usado por Bootstrap así como por summernote, y Popper es requerido por Bootstrap.

Yo las he incluido desde una CDN:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
    crossorigin="anonymous"></script>

Iniciando el editor

Ahora que tenemos todas las dependencias debemos agregar un script de JavaScript. Debemos agregar un elemento que será el contenedor del editor, en este caso tiene el id summernote aunque podría tener cualquier otro:

<div id="summernote">Aquí va el contenido por defecto del editor</div>

Después vamos a obtener una referencia a ese elemento usando jQuery. Para ello podríamos hacer un:

const contenedor = $("#summernote");

Y una vez que tengamos dicho contenedor, invocamos al método summernote con contenedor.summernote() para convertir el div en un editor WYSIWYG. Dicho con otras palabras, podríamos hacer lo siguiente:

$('#summernote').summernote();

Nota: recuerda que al trabajar con jQuery, lo más recomendable es colocar el código en el callback de $(document).ready(). Al final te dejaré el ejemplo completo y funcional.

Obtener HTML

El usuario va a diseñar todo lo necesario en el editor, y para poder guardar su trabajo podemos obtener el HTML resultante invocando de nuevo a summernote pero pasando una cadena con el valor code en el primer argumento. Algo así:

const html = $('#summernote').summernote('code');

Recuerda:

• #summernote es usado porque el # indica que estamos obteniendo un elemento por su id, y summernote es el id del div contenedor.
• El método summernote es propio del editor, y al pasar el primer argumento nos va a devolver el código HTML. Este nombre de método no se puede cambiar, ya que así se llama la función independientemente del id del contenedor.

Poniendo todo junto

A continuación te dejo un ejemplo completo donde:

1. Incluimos todas las dependencias para el editor HTML
2. Iniciamos el editor WYSIWYG
3. Agregamos un botón que obtiene el HTML y lo imprime en la consola

Puedes ver el código completo en GitHub. Todo lo importante está en el index.html y recuerda que puedes probarlo en la página de demostración:  https://parzibyte.github.io/ejemplos-javascript/wysiwyg/