≡En resumen
- Un editor WYSIWYG te deja dar formato con botones y ver el resultado final al instante.
- La expresión viene de un chiste televisivo de 1969 y se adoptó en informática en Xerox PARC a mediados de los setenta.
- En la web, el editor visual traduce lo que haces a HTML: cómodo, pero no siempre limpio.
- Markdown y la edición de código dan más control; el WYSIWYG, más rapidez para quien no programa.
- El editor de bloques de WordPress es una evolución del WYSIWYG clásico basada en bloques.
01 ¿Qué es WYSIWYG y qué significa?
Se pronuncia de forma aproximada «uísiuig» y se usa como sustantivo o adjetivo: «un WYSIWYG», «un editor WYSIWYG». Lo encuentras en procesadores de texto como Word o Google Docs, en herramientas de maquetación, en editores de email marketing y en el panel de casi cualquier gestor de contenidos.
Su contrario es la edición basada en marcas: escribes el contenido con etiquetas o símbolos y el aspecto final solo lo ves después, al generar o publicar el documento. Es lo que ocurre cuando editas código HTML a mano o escribes en Markdown.
02 Historia del WYSIWYG: de Xerox PARC al editor de bloques
La frase no nació en informática. «What you see is what you get» era la muletilla de Geraldine, el personaje del humorista Flip Wilson, que apareció por primera vez en septiembre de 1969 y se hizo popular en su programa de televisión a principios de los setenta. En Xerox PARC, los creadores de Bravo, el primer procesador de texto que mostraba en pantalla tipos de letra, justificación y espaciado reales (1974), adoptaron la expresión hacia 1975.
| Año | Hito |
|---|---|
| 1974 | Bravo, en Xerox PARC (Butler Lampson, Charles Simonyi y su equipo), primer editor WYSIWYG |
| 1983-1984 | LisaWrite (Apple Lisa) y MacWrite (Macintosh) llevan el WYSIWYG al gran público |
| Años 90 | Editores web visuales de escritorio, como FrontPage y Dreamweaver, permiten crear páginas sin tocar HTML |
| 2003 | Frederico Caldeira Knabben lanza FCKeditor, antecesor de CKEditor |
| 2004 | Se publica TinyMCE (11 de marzo), que después sería el editor clásico de WordPress |
| 2018 | WordPress 5.0 (6 de diciembre) estrena el editor de bloques, conocido como Gutenberg |
03 Cómo funciona un editor WYSIWYG web
En un navegador, un editor visual es una zona editable de la página controlada por JavaScript. Cada vez que pulsas un botón, el editor modifica el HTML que hay debajo y lo guarda en la base de datos al publicar. Lo que ves es una representación del HTML, no una imagen del resultado: por eso el aspecto final también depende de la hoja de estilos de tu web.
-
1
Escribes y das formato
Usas la barra de herramientas o atajos de teclado: títulos, listas, enlaces, imágenes.
-
2
El editor genera HTML
Convierte cada acción en etiquetas: h2 para un título, ul y li para una lista, a para un enlace.
-
3
Limpia y valida
Los buenos editores eliminan estilos basura al pegar desde Word y filtran etiquetas no permitidas por seguridad.
-
4
Se guarda el contenido
El CMS almacena el HTML (o bloques con su propio formato) y lo muestra con el diseño del tema.
04 Editores WYSIWYG más conocidos: TinyMCE, CKEditor, Gutenberg y otros
| Editor | Tipo | Dónde lo encontrarás |
|---|---|---|
| TinyMCE | Editor de texto enriquecido de código abierto con extensiones de pago | Editor clásico de WordPress y muchas aplicaciones web |
| CKEditor 5 | Editor de texto enriquecido con licencia GPL o comercial | Drupal y aplicaciones empresariales |
| Editor de bloques de WordPress (Gutenberg) | Editor visual por bloques | WordPress desde la versión 5.0 |
| Maquetadores visuales (Elementor, Divi…) | Constructores de páginas de arrastrar y soltar | Plugins y temas de WordPress |
| Editores de email | Constructores de plantillas de correo | Plataformas de email marketing |
El editor de WordPress merece mención aparte. Gutenberg, el editor de bloques de WordPress, sustituyó en 2018 al editor clásico basado en TinyMCE: en lugar de un único documento, cada párrafo, imagen o botón es un bloque con sus propios ajustes. Sigue siendo WYSIWYG, pero más estructurado y con más control sobre el diseño de la página.
05 WYSIWYG vs Markdown vs código: cuál elegir
Markdown, creado por John Gruber en 2004, es un formato de texto plano en el que marcas el formato con símbolos: almohadillas para títulos, asteriscos para negritas. Es muy popular entre desarrolladores y en documentación. La edición de código, con editores HTML de código, da el máximo control a quien sabe programar.
| WYSIWYG | Markdown | Código (HTML) | |
|---|---|---|---|
| Curva de aprendizaje | Mínima | Baja: unos pocos símbolos | Alta |
| Vista del resultado | Inmediata | En vista previa | En el navegador |
| Limpieza del HTML | Depende del editor y del usuario | Alta y predecible | Total, si sabes lo que haces |
| Control del diseño | Limitado a lo que ofrece el editor | Bajo: se centra en la estructura | Completo |
| Ideal para | Equipos de marketing y redactores | Desarrolladores, documentación, notas | Plantillas, landings a medida y componentes |
06 Ventajas e inconvenientes de los editores WYSIWYG
Ventaja: autonomía
Cualquier persona del equipo puede publicar y actualizar contenido sin depender de un desarrollador.
Ventaja: rapidez
Ves el resultado mientras escribes y corriges sobre la marcha.
Inconveniente: HTML sucio
Estilos en línea, etiquetas vacías o anidadas de más que pesan y dificultan el mantenimiento.
Inconveniente: falsa estructura
Es fácil poner un texto grande y en negrita en lugar de un título real, algo que afecta a la accesibilidad y al SEO.
- ✓Usa los estilos de título (H2, H3) del editor en vez de agrandar la letra.
- ✓Escribe textos alternativos en todas las imágenes.
- ✓Crea listas con el botón de lista, no con guiones manuales.
- ✓Evita colores y tipos de letra aplicados a mano: deja que mande la hoja de estilos.
- ✓Revisa de vez en cuando el HTML generado, sobre todo en páginas importantes.
Estos pros y contras son parte del motivo por el que WordPress sigue siendo tan usado por equipos de marketing. Si estás valorándolo para tu empresa, repasa las ventajas y desventajas de WordPress.
07 Cómo elegir un editor WYSIWYG para tu web
- ✓Que genere HTML semántico y permita restringir estilos y etiquetas.
- ✓Que limpie el formato al pegar desde otros programas.
- ✓Que sea accesible, con navegación por teclado y compatibilidad con lectores de pantalla.
- ✓Que su licencia encaje con tu proyecto: algunos editores combinan núcleo libre y funciones de pago.
- ✓Que tenga soporte y actualizaciones de seguridad activas.
- ✓Que se integre con tu CMS, tu sistema de imágenes y tu flujo de revisión.
En una web de WordPress lo normal es aprovechar el editor de bloques con un tema bien construido. En plataformas propias, integrar y limitar un editor visual es parte del desarrollo web a medida. Y si lo que buscas es una web que tu equipo pueda actualizar sin miedo a romperla, empieza por un diseño web profesional pensado para editar contenido.
Preguntas frecuentes sobre WYSIWYG
Significa What You See Is What You Get, «lo que ves es lo que obtienes». Se aplica a los editores que muestran el contenido mientras lo creas con el mismo aspecto que tendrá publicado.
Normalmente se pronuncia «uísiuig», como una sola palabra, aunque también hay quien lo deletrea.
Es un programa o componente web que te permite dar formato a textos, insertar imágenes y enlaces con botones, viendo el resultado al instante y sin escribir código.
Word y Google Docs como procesadores de texto; TinyMCE y CKEditor para webs; el editor de bloques de WordPress; y los constructores visuales de páginas y de emails.
En un WYSIWYG ves el formato mientras escribes; en Markdown marcas el formato con símbolos en texto plano y ves el resultado en una vista previa o al publicar.
Sí. Es un editor visual por bloques: cada elemento de la página es un bloque que editas viendo cómo quedará.
No por sí mismos. El riesgo está en usarlos mal: títulos simulados con negrita, HTML recargado o imágenes sin texto alternativo.
Fuentes consultadas
Sobre el autor
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil y artículos → Ver perfil en LinkedIn ↗