La vista de código te permite inspeccionar y editar el HTML subyacente de un artículo directamente en el editor avanzado WYSIWYG, dándote control sobre el marcado que el editor visual no puede exponer.
¿Cuándo se puede usar la vista de código?
- Inyecta elementos HTML personalizados que la barra de herramientas visual no soporta
- Aplicar estilos en línea a elementos específicos
- Incrustar fragmentos de iconos de FontAwesome u otros
- Corregir errores de etiquetas no soportadas señalados por el editor
- Añadir símbolos o iconos en las celdas de la tabla
- Buscar dentro de HTML usando
Ctrl + F
Formateo automático de HTML
El editor estandariza automáticamente la sangría y el espaciado cada vez que abres la vista de código. Esto solo funciona al entrar — no al guardar o publicar — y no afecta a bloques HTML personalizados ni a bloques de script.
Búsqueda en la vista de código
Utiliza la búsqueda integrada para localizar elementos o textos HTML específicos dentro del código.
| Acción | Atajo |
|---|---|
| Búsqueda abierta | Ctrl + F |
| Siguiente resultado | Enter |
| Resultado anterior | Shift + Enter |
| Auto-indentación / código de formato | Shift + Tab |
Cambios en el guardado
Los cambios en la vista de código no se guardan automáticamente. Pulsa Ctrl + S antes de volver al editor visual o alejarte.
Los cambios no guardados en la vista de código se perderán si navegas sin hacer clic en Guardar.
Etiquetas y atributos HTML no soportados
El editor marca etiquetas y atributos HTML no soportados en lugar de eliminarlos, para que puedas revisarlos y corregirlos.
¿Cuándo ocurre esto?
- Al cambiar un artículo del editor WYSIWYG al editor avanzado WYSIWYG, el contenido no soportado se marca automáticamente
- Cuando añades etiquetas o atributos no soportados directamente en la vista de código, el editor los marca al analizar
Qué hace el editor
- Detecta etiquetas no soportadas (por ejemplo,
<marquee>, )<blink>y atributos (por ejemplo,onmouseover,style="text-decoration:blink") - Marca los elementos marcados con descripciones emergentes y bloquea los resaltados sin interrumpir el contenido que lo rodea
- Bloquea la edición visual de elementos marcados hasta que se resuelva en la vista de código
Los elementos marcados pueden modificarse, eliminarse o corregirse directamente en la vista de código.
Categorías de etiquetas soportadas
Formato de texto
- Abreviaturas (
<abbr>) - Cita bloqueada (
<blockquote>) - Encabezados (
<h1>–<h6>) - Párrafo (
<p>) - Subíndice / Superíndice (
<sub>,<sup>) - Código en línea (
<code>)
Estructura y medios
- Imágenes (
<img>) - Enlaces (
<a>) - Tablas (
<table>,<tr>,<td>) - Listas (
<ul>,<ol>,<li>) - Divisores (
<hr>) - Spans y divs con atributos soportados
Mejores prácticas
- Usa la vista de código solo cuando el editor visual no pueda realizar la tarea. La edición directa de HTML aumenta el riesgo de introducir etiquetas no soportadas o marcado roto.
- Mantente en las etiquetas compatibles al escribir o pegar HTML. Las etiquetas no soportadas activan banderas y bloquean la edición visual de esa sección hasta que se corrija.
- Lo uso
Shift + Tabpara reformatear código después de hacer editos, manteniendo el marcado legible y más fácil de depurar. - Guarda con frecuencia usando
Ctrl + S, especialmente antes de cambiar de modo. No hay guardado automático ni recuperación por cambios no guardados. - Resuelve los elementos marcados rápidamente. Dejarlas sin resolver impide la edición visual del bloque afectado y puede causar problemas inesperados de renderizado al publicar.**