Los mejores editores HTML WYSIWYG gratuitos para la web
Comparamos CKEditor, TinyMCE, Quill y más: funciones, licencias y cómo elegir el mejor editor de texto enriquecido para tu sitio o app.
En esta página
La sigla significa «what you see is what you get» (lo que ves es lo que obtienes): quien escribe ve el texto ya formateado en lugar de las etiquetas, y normalmente puede pasar a la vista del código fuente para retocarlo. Lo encontrarás en paneles de administración, en CMS y en cualquier sitio donde una persona que no conoce HTML tenga que publicar algo.
En las capturas de pantalla se parecen todos; las diferencias se notan cuando el proyecto crece.
Cómo elegir #
- Licencia. Es el primer filtro. Algunas librerías han pasado de licencias permisivas a licencias copyleft o comerciales: en un producto cerrado pueden imponerte obligaciones que no habías previsto.
- Peso. Un editor completo puede superar unos cientos de kilobytes. En un panel interno no importa, pero en una página pública sí.
- Limpieza del HTML. La verdadera prueba es cuando alguien pega un texto desde Word: los editores serios eliminan el formateo innecesario; los otros lo dejan pasar y llenan la base de datos de estilos.
- Extensibilidad. Carga de imágenes, menciones, tablas, plantillas: comprueba si la función que necesitas está incluida o es un módulo de pago.
- Accesibilidad y móvil. Solo se pueden probar sobre el terreno: algunos editores en una pantalla pequeña se vuelven inutilizables.
Las opciones principales #
| Editor | Licencia | Punto fuerte |
|---|---|---|
| CKEditor 5 | GPL 2+ o comercial | El más completo, muy cuidado |
| TinyMCE | GPL 2+ o comercial | Gran difusión y documentación |
| Froala | Comercial | Interfaz muy cuidada, rápido |
| Quill | BSD | Ligero, ideal para apps modernas |
| Tiptap | MIT (módulos Pro de pago) | Basado en ProseMirror, muy flexible |
| Lexical | MIT | De Meta, pensado para React |
| Editor.js | Apache 2.0 | Produce bloques en JSON, no HTML |
| Jodit | MIT (versión Pro de pago) | Sin dependencias externas |
| Trix | MIT | Sencillo, integrado con Ruby on Rails |
| Summernote | MIT | Inmediato, basado en Bootstrap |
CKEditor 5 #
Es el más maduro del grupo y tiene más de veinte años: edición colaborativa en tiempo real, gestión avanzada de imágenes, tablas completas, fórmulas, controles de accesibilidad y un pegado desde Word que funciona. Con su arquitectura de plugins, incluyes solo lo que necesitas.
La licencia es doble: GPL 2 o posteriores para proyectos open source compatibles, o una licencia comercial que elimina las restricciones del copyleft y desbloquea funciones premium, como la colaboración, la exportación a Word y PDF, y el asistente basado en inteligencia artificial.
Si tu producto es cerrado, necesitas la licencia comercial. Desde la versión 44, a finales de 2024, incluso el uso bajo GPL requiere indicar una clave de licencia ('GPL') en la configuración.
TinyMCE #
Durante años ha sido el editor por excelencia (era el motor del Classic Editor de WordPress) y sigue siendo el que tiene más documentación e integraciones listas. Un detalle: con la versión 7, en 2024, ha pasado de la licencia MIT a la GPL 2 o posteriores. Si lo habías usado en un producto propietario confiando en los términos antiguos, comprueba tu situación y, si es necesario, pásate a la licencia comercial.
Aquí también las funciones más solicitadas por las empresas son de pago, empezando por PowerPaste, que limpia el texto pegado desde Word y Excel. Sigue siendo una opción sólida, siempre que mires la licencia antes y no después.
Froala #
Es comercial desde el principio, sin versión gratuita para producción, pero probablemente tiene la interfaz más agradable del grupo: barra de herramientas que se adapta a la pantalla, popups contextuales, tablas elegantes y un inicio rapidísimo. Si tienes presupuesto y te importa la experiencia de quien escribe, merece una prueba.
Quill #
Ligero, con una arquitectura limpia y su propio modelo de documento (Delta) en lugar del simple HTML. Tras años de pausa, la versión 2.0 salió en 2024, y es muy utilizado en aplicaciones modernas donde se necesita un editor predecible y fácil de controlar mediante código.
No tiene la riqueza de CKEditor en cuanto a tablas y contenidos complejos, pero para comentarios, descripciones y textos de longitud media sobra.
Tiptap y Lexical #
Son los dos nombres nuevos que muchos desarrolladores eligen hoy en día. Tiptap se apoya en ProseMirror, tiene una excelente integración con React, Vue y otros frameworks, y te permite construir la interfaz que quieras; la colaboración y algunos módulos son de pago. Lexical es el editor desarrollado por Meta, ligero y pensado sobre todo para React. Ambos requieren más trabajo inicial que un editor «listo para usar», porque la barra de herramientas la construyes tú.
Editor.js #
Funciona de forma distinta a los demás: en lugar de producir HTML, devuelve una estructura de bloques en formato JSON. Cada párrafo, imagen o cita es un bloque con sus propios datos.
Es una ventaja cuando el contenido debe reutilizarse en distintos lugares, como sitios web, apps y newsletters, porque tú decides la presentación al mostrarlos. Es una desventaja si lo único que necesitas es HTML para guardar y mostrar.
Jodit, Trix y Summernote #
Jodit está escrito en TypeScript sin dependencias y tiene una buena relación entre peso y funciones, incluyendo un pequeño editor para recortar y redimensionar imágenes. Es MIT, con una versión Pro de pago para el gestor de archivos avanzado y otras funciones.
Trix nació en el mundo Ruby on Rails, es deliberadamente minimalista y produce un marcado muy limpio.
Summernote se apoya en jQuery y Bootstrap y se configura en pocas líneas; el modo Air oculta la barra y muestra los botones solo cuando seleccionas el texto. Es la opción rápida para un panel interno, aunque las actualizaciones son más lentas que las de CKEditor o TinyMCE.
Tres cosas que se descubren tarde #
El HTML entrante debe filtrarse en el servidor. Ningún editor sustituye este paso: cualquiera puede enviar a tu sitio contenidos escritos a mano, saltándose la interfaz. Necesitas una librería de saneamiento en el servidor (por ejemplo, HTML Purifier en PHP o DOMPurify con Node), de lo contrario permitirás que alguien ejecute código en el navegador de otros visitantes.
La carga de imágenes no suele estar incluida. El editor te da el botón, pero la parte que recibe el archivo (controles, redimensionamiento, guardado) la escribes tú.
Pegar desde Word es la prueba decisiva. Antes de elegir, pega en el editor un documento real lleno de estilos y observa el HTML que sale. Es la prueba que separa las librerías maduras de las demás.
Cómo elegir según el proyecto #
- Sitio o aplicación open source: CKEditor 5 o TinyMCE en su versión con licencia copyleft.
- Producto comercial cerrado: Quill, Tiptap, Lexical, Jodit, Trix o Summernote, que tienen licencias permisivas; o bien la licencia comercial de CKEditor, TinyMCE o Froala.
- Panel interno para hacer rápido: Summernote o Jodit.
- Contenidos estructurados para reutilizar en otros sitios: Editor.js.
- Necesitas edición colaborativa en tiempo real: CKEditor con licencia comercial, o bien Tiptap con sus módulos de pago.
- Aplicación React hecha a medida: Lexical o Tiptap.
Preguntas frecuentes #
¿Cuál es el mejor editor WYSIWYG gratuito? #
Para funciones, CKEditor 5, siempre que la licencia copyleft sea compatible con tu proyecto. Si el producto es cerrado y no quieres comprar una licencia, Quill es el mejor compromiso entre ligereza, licencia permisiva y calidad del resultado; Tiptap si estás dispuesto a construirte tú mismo la interfaz.
¿Son seguros estos editores contra ataques de tipo XSS? #
Ayudan, pero no bastan. Los editores filtran el contenido en el navegador, y ese filtro se puede evadir enviando los datos directamente al servidor. La limpieza debe hacerse en el servidor antes de guardar y, mejor aún, también antes de mostrarlo.
¿Puedo usarlos con React, Vue o Angular? #
Sí, los principales tienen componentes oficiales para los frameworks más populares. Eso sí, comprueba que el componente esté actualizado a la versión del framework que uses: ahí es donde suelen surgir las incompatibilidades.
¿Es mejor guardar HTML o JSON en la base de datos? #
El HTML es inmediato de mostrar, pero vincula el contenido a una sola presentación. El JSON por bloques, como el de Editor.js, requiere un paso extra para la visualización, pero hace que los contenidos sean reutilizables en diferentes canales. Para un blog, el HTML va de maravilla; para contenidos destinados a webs, apps y newsletters, el formato estructurado merece la pena.
¿Un editor WYSIWYG ralentiza mucho la página? #
Depende de la configuración. Con las librerías modulares solo incluyes los plugins que necesitas y el peso baja considerablemente. En cualquier caso, carga el editor solo en las páginas donde sea necesario, no en todo el sitio.
¿Cuál es el mejor editor WYSIWYG para WordPress? #
WordPress usa el editor de bloques Gutenberg, que no es una de estas librerías. El antiguo Classic Editor, disponible aún como plugin, está basado en TinyMCE. Las librerías de esta guía te sirven si desarrollas tu propio CMS, un panel o una aplicación.
¿El HTML producido es bueno para el SEO? #
Si el editor es bueno y quien escribe usa los encabezados como tales y no como texto agrandado, sí. El problema surge con el código pegado desde Word y con los <span>llenos de estilos: mantén limpio el resultado y, si puedes, limita en la barra las opciones que generen marcado innecesario, como fuentes o tamaños personalizados.
