javascript

Editor WYSIWYG con JavaScript

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

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/

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.