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.
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:
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>
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>
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.
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.A continuación te dejo un ejemplo completo donde:
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/
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.