Visualização de código

A visualização de código permite que você inspecione e edite o HTML subjacente de um artigo diretamente no editor avançado WYSIWYG, dando controle sobre marcações que o editor visual não pode expor.

Quando é possível usar a visualização de código

• Injete elementos HTML personalizados que a barra de ferramentas visual não suporta
• Aplique estilos inline a elementos específicos
• Incorpore FontAwesome ou outros trechos de ícones
• Corrija erros de tag não suportados sinalizados pelo editor
• Adicionar símbolos ou ícones nas células da tabela
• Busca dentro de HTML usando Ctrl + F

Formatação automática de HTML

O editor padroniza automaticamente a indentação e o espaçamento toda vez que você abre a visualização de código. Isso só roda na entrada — não no save ou post — e não afeta blocos personalizados de HTML ou script.

Busca na visualização de código

Use a busca embutida para localizar elementos ou textos HTML específicos dentro do código.

Mudanças de salvamento

Alterações na visão de código não são salvas automaticamente. Pressione Ctrl + S antes de voltar para o editor visual ou navegar para longe.

Tags e atributos HTML não suportados

O editor sinaliza tags e atributos HTML não suportados em vez de removê-los, para que você possa revisá-los e corrigi-los.

Quando isso acontece?

• Ao trocar um artigo do editor WYSIWYG para o editor WYSIWYG Avançado — o conteúdo não suportado é sinalizado automaticamente
• Quando você adiciona tags ou atributos não suportados diretamente na visualização de código — o editor os sinaliza na análise sintética

O que o editor faz

• Detecta tags não suportadas (por exemplo, <marquee>, ) <blink>e atributos (por exemplo, onmouseover, style="text-decoration:blink")
• Marca elementos sinalizados com dicas de ferramentas e bloqueia os destaques sem interromper o conteúdo ao redor
• Bloqueia a edição visual de elementos sinalizados até ser resolvido na visualização de código

Categorias de tags suportadas

Formatação de texto

• Abreviações (<abbr>)
• Citação bloca (<blockquote>)
• Títulos (<h1>–<h6>)
• Parágrafo (<p>)
• Índice / Índice (<sub>, <sup>)
• Código inline (<code>)

Estrutura e mídia

• Imagens (<img>)
• Links (<a>)
• Tabelas (<table>, <tr>, <td>)
• Listas (<ul>, <ol>, <li>)
• Divisores (<hr>)
• Spans e divs com atributos suportados

Melhores práticas

• Use a visualização de código apenas quando o editor visual não conseguir realizar a tarefa. A edição direta de HTML aumenta o risco de introduzir tags não suportadas ou marcação quebrada.
• Mantenha-se nas tags suportadas ao escrever ou colar HTML. Tags não suportadas disparam flags e bloqueiam a edição visual daquela seção até serem corrigidas.
• Uso Shift + Tab para reformatar código após fazer edições, mantendo a marcação legível e mais fácil de depurar.
• Salve frequentemente usando Ctrl + S, especialmente antes de trocar de modo. Não há salvamento automático nem recuperação para alterações não salvas.
• Resolver os elementos sinalizados rapidamente. Deixá-los sem resolução impede a edição visual do bloco afetado e pode causar problemas inesperados de renderização na publicação.**