Ferramentas para desenvolvedores · Editor HTML WYSIWYG
O DOM explicado para editores: por que HTML é uma árvore, não um arquivo de texto
· Fundo
HTML dom conteúdo editável
Apresenta o Document Object Model para não programadores, cobrindo regras de aninhamento, elementos pai e filho e como os navegadores reparam aninhamento inválido, para explicar o comportamento do editor que de outra forma pareceria arbitrário.
Por que seu <p> se fechou sozinho - abre com marcação que mudou após colar
Um parágrafo pode parecer fechado ou movido depois que um fragmento passa por um editor porque a árvore resultante – e não a sequência de caracteres original do autor – é o que importa em última análise. ToolAcre adiciona outra transformação: ele tokeniza e reescreve a fonte derivada do navegador em sua própria lista de permissões.
Quando a fonte mudar, pergunte qual estágio a alterou. O navegador pode ter modificado o conteúdo editável DOM ou o sanitizador pode ter mapeado um alias, desembrulhado um nó ou balanceado tags aceitas. Chamar cada diferença de “o navegador consertou” esconde esse importante limite.
Caixas dentro de caixas — apresenta o modelo de árvore com um pequeno exemplo
Pense nos elementos como caixas conectadas por relacionamentos entre pais e filhos. Em `<p>Read <strong>carefully</strong>.</p>`, p é o pai do texto, forte e mais texto; forte é o pai da palavra cuidadosamente. O recuo da fonte pode ilustrar a árvore, mas não cria o relacionamento.
O bonito formatador de ToolAcre coloca contêineres de blocos em linhas e mantém os elementos embutidos com o texto ao redor. As listas recebem linhas li recuadas. Este formato é para leitura de saída higienizada. O modelo real permanece com elementos aninhados e nós de texto, independentemente de a fonte ser compacta ou espalhada por linhas.
O aninhamento permitido é balanceado pelo reescritor de ToolAcre; modelos de conteúdo do navegador são mais amplos
HTML define modelos de conteúdo que são muito mais amplos e detalhados do que a política deste editor. ToolAcre permite um conjunto específico, mas não valida todas as regras de aninhamento semântico. Sua pilha garante um fechamento bem formado entre as tags permitidas; isso não prova que todo relacionamento resultante seja HTML ideal para um destino.
Por exemplo, uma lista deve conter itens de lista apropriados, mas a pilha genérica pode preservar combinações permitidas incomuns porque não é um validador de esquema. Os autores devem construir títulos, parágrafos e listas sensatos por meio da barra de ferramentas ou da fonte revisada e, em seguida, validar de acordo com os requisitos de destino quando a correção for importante.
ToolAcre repara tags aceitas com uma pilha, não com o algoritmo de análise HTML completo
Os navegadores aplicam um algoritmo de análise HTML completo com recuperação de erros. ToolAcre não o reimplementa. Seu tokenizer reconhece as estruturas necessárias para a lista de permissões e seu gravador fecha os elementos internos aceitos quando uma tag de final de cruzamento aparece. Ele descarta fechamentos perdidos e fecha as aberturas restantes no final.
A fonte nomeia explicitamente os diferenciais do analisador como uma razão para não tratar o módulo como um filtro XSS de entrada hostil geral. Um navegador pode interpretar strings deliberadamente malformadas de maneira diferente. A sandbox de visualização fornece um limite independente de execução dentro de ToolAcre, enquanto os servidores ainda precisam de saneamento adequado com reconhecimento de HTML5.
Nós de texto e espaços em branco - explica por que existem espaços e quebras de linha entre tags na árvore
O texto entre os elementos torna-se tokens de texto, incluindo caracteres de espaço em branco. O formatador bonito recolhe os espaços em branco comuns fora do pré, enquanto o conteúdo do pré é retido exatamente. A conversão de texto simples insere novas linhas após o final do bloco e para br e, em seguida, reduz o excesso de linhas em branco.
O espaço em branco, portanto, participa de forma diferente em cada etapa. O espaçamento visual pode vir de texto, br, limites de bloco ou CSS. Inspecione nós e caracteres em vez de tratar cada lacuna visível como uma margem. O desinfetante pode normalizar a formatação de espaços em branco sem alterar as palavras que o leitor vê.
Exemplo resolvido: traçar uma nota de dois parágrafos com uma lista — lê a marcação produzida como uma árvore, identificando pais e filhos
Construa `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. O fragmento possui três elementos filhos de nível raiz. O parágrafo contém texto e forte; a lista contém dois filhos li, cada um com texto.
Mude da fonte para o visual e vice-versa. A árvore permitida deve permanecer equilibrada e o modo bonito colocará o título e o parágrafo nas linhas enquanto recua os itens da lista. Este exercício é controlado; ele não demonstra todas as entradas malformadas ou caminhos de reparo do navegador.
O que isso não cobre — programação JavaScript DOM ou modelo de caixa CSS
Este artigo não ensina programação JavaScript DOM, observadores de mutação, APIs de seleção ou o modelo de caixa CSS. A árvore de elementos e a árvore de caixas de layout estão relacionadas, mas não são idênticas. Ele também não afirma que a lista de tokens escrita à mão é um navegador DOM.
Nenhuma conclusão generalizada de segurança resulta de uma árvore organizada. Um invasor pode ter como alvo diferenças de análise e URLs, e é por isso que a filtragem de saída, a visualização em sandbox e a higienização do servidor permanecem distintas. Use o modelo de árvore para raciocinar sobre a estrutura, não para dispensar a revisão de segurança do sistema receptor.
Conclusão: pense em árvores - resume o modelo mental e como a saída de marcação do editor HTML WYSIWYG de ToolAcre mostra a árvore que você está construindo
Pense nas árvores quando o comportamento visual parecer arbitrário. Identifique os nós pai, filho e de texto pretendido e compare-os com a fonte filtrada. ToolAcre torna essa inspeção prática ao combinar o rascunho editável com conteúdo com um fragmento reescrito legível.
Um modelo mental forte também revela limites: div desembrulhado perde um pai, script descartado perde sua subárvore e b torna-se forte. Uma vez que essas transformações são explícitas, as correções tornam-se decisões estruturais, em vez de repetidos empurrões visuais cuja marcação permanece desconhecida.