Hace tiempo venía dándole vueltas a la idea de contar con un editor de texto enriquecido que pudiera integrar fácilmente en mis propios desarrollos sin depender de soluciones demasiado pesadas o complejas de adaptar. A partir de esa necesidad nació RichText, un editor WYSIWYG desarrollado en JavaScript vanilla con una interfaz moderna y una base técnica sencilla de mantener.
El objetivo principal fue construir un componente reutilizable, fácil de inicializar y suficientemente flexible como para trabajar tanto en una demo aislada como dentro de un sistema administrativo más grande. La idea no era competir con editores gigantes, sino resolver de forma práctica las necesidades habituales de edición HTML desde el navegador.
Objetivo del proyecto y tecnologías utilizadas
RichText fue desarrollado sobre una clase ES6 que genera dinámicamente la barra de herramientas, el área editable y el modo de edición de código fuente. Para la interfaz visual utilicé Bootstrap 5 y Bootstrap Icons, mientras que los estilos específicos del componente quedaron encapsulados en una hoja CSS propia.
Aunque se trata de un componente frontend, el enfoque desde el inicio fue mantenerlo desacoplado del backend para integrarlo sin problema en proyectos PHP, CodeIgniter o cualquier otro entorno donde simplemente se necesite capturar y persistir HTML generado por el usuario.
Arquitectura y funcionalidades principales
La arquitectura del editor gira en torno a una clase principal que recibe el contenedor y un conjunto de opciones. A partir de ahí se crean internamente la toolbar, el editor visual y el textarea usado para el modo fuente. También se centraliza el registro de eventos para botones, selectores, imágenes, popovers y cambios de modo.
let richTextEditor = new RichText('editor', {
height: '500px',
placeholder: 'Escribe algo aquí...',
emojiSet: 'custom',
customEmojiPath: '../emoticons/',
customEmojiList: '../emoticons/emojis.json'
});Entre las funcionalidades principales que quedaron implementadas destacan:
- Formato de texto con negrita, cursiva, tachado y limpieza de estilos.
- Selección de fuentes, tamaños y color de texto.
- Alineación horizontal, sangrías y listas ordenadas o desordenadas.
- Inserción de enlaces, imágenes y videos de YouTube responsivos.
- Modo código fuente para editar el HTML manualmente.
- Modo pantalla completa para trabajar con mayor comodidad.
- Soporte para emojis Unicode y también para sets personalizados cargados desde JSON.
Desafíos técnicos encontrados
Uno de los desafíos más importantes fue lograr una edición fluida usando las APIs que hoy siguen siendo más prácticas para este tipo de componentes en el navegador. En este caso gran parte del comportamiento se apoya en document.execCommand(), que si bien ya no representa la solución más moderna, continúa siendo útil para herramientas ligeras como esta.
Otro punto delicado fue controlar el HTML resultante. Por ejemplo, tuve que interceptar la tecla Enter para evitar estructuras no deseadas y forzar saltos de línea con <br>, además de limpiar el pegado desde el portapapeles para insertar texto sin formato.
Un tercer problema interesante apareció con el redimensionamiento de imágenes. En lugar de envolver cada imagen con elementos adicionales dentro del editor, opté por crear un overlay flotante absoluto con manejadores en las esquinas y los bordes. De esa forma la experiencia visual mejora bastante sin ensuciar el HTML generado por el usuario.
Solución implementada
La solución final fue organizar el componente en métodos pequeños y bien separados: generación de interfaz, ejecución de comandos, manejo de imágenes, carga de emojis personalizados, inserción de videos y sincronización entre modo visual y modo fuente. En CSS quedaron resueltos el modo fullscreen, el contenedor responsivo para YouTube y el sistema de overlay para redimensionar imágenes seleccionadas.
const videoHTML = `
<div class="video-container">
<iframe src="https://www.youtube.com/embed/${videoId}" title="YouTube video" allowfullscreen></iframe>
</div>
`;
document.execCommand('insertHTML', false, videoHTML);También incorporé una carga asíncrona de emojis personalizados desde un archivo JSON, lo que permite usar recursos propios sin acoplar el editor a un set fijo. Sumado a eso, el cambio entre modo visual y modo fuente mantiene sincronizado el contenido para editar el HTML directamente cuando hace falta.
Aprendizajes obtenidos y conclusión
El desarrollo de RichText me dejó varios aprendizajes. El primero es que incluso una herramienta aparentemente pequeña puede requerir bastante cuidado en la interacción si se quiere que resulte cómoda de usar. El segundo es que vale la pena mantener el componente desacoplado, porque eso facilita mucho su reutilización en proyectos distintos.
En conclusión, RichText terminó convirtiéndose en una base sólida para resolver edición enriquecida en proyectos donde necesito control, simplicidad y una integración directa. Aún quedan posibilidades de mejora, especialmente pensando en APIs modernas de selección y edición, pero la versión actual ya permite trabajar con texto enriquecido, multimedia y contenido HTML editable desde una estructura ordenada.
Repositorio:
https://github.com/RichardCollao/RichText