Ferramentas para desenvolvedores · Editor HTML WYSIWYG
Como um editor WYSIWYG transforma a formatação em HTML: contenteditable explicado
· Como funciona
HTML conteúdo editável fluxo de trabalho do desenvolvedor
Explica o atributo contenteditable que torna qualquer elemento editável, como o navegador altera o DOM conforme você digita e formata e como esse DOM se torna o HTML que você copia.
Você pressionou negrito; de onde veio o <strong>? — abre com o intervalo entre clicar em um botão e ver a marcação
Um botão da barra de ferramentas denominado Negrito parece um pincel, mas o navegador deve representar o resultado em uma árvore de documentos. Uma frase selecionada pode se tornar um elemento <b> ou <strong> dependendo do comando de edição e do mecanismo. A tarefa do desenvolvedor é transformar essas mutações específicas do navegador em HTML que outra página possa ler sem aceitar todas as tags ou atributos perigosos. O que você vê na tela é um DOM editável, não um arquivo de processamento de texto com uma camada de formatação independente.
contenteditable: o atributo que torna uma página editável — explica o host de edição, o posicionamento do cursor e como o navegador controla o comportamento de edição
contenteditable="true" torna um elemento um host de edição. O navegador gerencia o movimento, seleção, inserção e exclusão do cursor dentro dele, com uma árvore DOM abaixo. A superfície de edição de ToolAcre usa esse recurso do navegador e expõe o modo visual e o modo de origem; o conteúdo permanece na página em vez de ser enviado a um servidor rich text. Um evento paste recebe atenção separada porque HTML colado pode incluir elementos e atributos que não devem entrar em um documento confiável desmarcado.
Cada pressionamento de tecla é uma mutação DOM - descreve o crescimento dos nós de texto, os elementos sendo agrupados e divididos e por que a árvore muda mesmo quando o texto parece inalterado
A digitação cria ou estende nós de texto; pressionar Enter pode dividir um bloco; colocar uma seleção em negrito envolve um intervalo. Não é garantido que o DOM preciso após dois cliques corresponda à string <strong> imaginada pelo desenvolvedor: os navegadores escolhem elementos e aninhamentos diferentes. ToolAcre atualmente usa document.execCommand para formatação. Esse API está obsoleto, mas não há nenhum substituto implementado uniformemente para cada operação de edição aqui, então o editor trata sua saída como entrada não confiável a ser normalizada, em vez de como marcação canônica.
Da string ativa DOM a HTML — explica a serialização da árvore editada na marcação que você pode copiar
Para copiar HTML, o editor lê o innerHTML da superfície de edição e passa a string resultante por meio de uma lista de permissões do elemento/attribute. Tags como b são normalizadas para semântica forte; links permitidos são verificados quanto a esquemas URL aceitáveis, enquanto manipuladores de eventos e atributos não relacionados são removidos. O modo Fonte também passa seu texto pelo mesmo filtro antes de colocá-lo de volta na superfície visual. Este é um caminho de limpeza específico do editor, não um desinfetante HTML de uso geral do lado do servidor para conteúdo hostil de usuários arbitrários.
Exemplo resolvido: uma nota de dois parágrafos com uma frase em negrito - segue DOM durante a digitação, seleção e negrito e, em seguida, mostra a marcação resultante
Digite dois parágrafos – “Atualização do projeto” e “Rascunho pronto” – depois selecione “Rascunho” no segundo e pressione Negrito. Um navegador pode inserir <b>Draft</b> no DOM ativo. Mudar para o modo de origem passa pelo desinfetante de ToolAcre, que pode emitir <strong>Draft</strong> dentro de seu parágrafo após a normalização. Experimente uma carga útil <img onerror="..."> colada em um documento descartável: a lista de permissões de saída não inclui imagens ou atributos de manipulador de eventos. O exemplo ilustra por que você inspeciona a marcação resultante em vez de assumir que um clique tem uma representação universal HTML.
Por que as mesmas ações fornecem marcações diferentes em navegadores diferentes — aborda o comportamento de edição específico do navegador e por que os editores normalizam sua saída
Diferentes navegadores implementam comandos de edição, quebras de linha e limites de seleção de maneira diferente. Mesmo parágrafos visíveis idênticos podem ser serializados com diferentes extensões aninhadas ou elementos de bloco. A etapa de normalização reduz algumas diferenças, mas não torna uma superfície WYSIWYG um serializador garantido por padrões. ToolAcre mostra a fonte junto com o resultado visual, para que você possa corrigir aninhamentos estranhos. Sua visualização é executada em um iframe com um atributo sandbox que não garante a execução de script, limitando o impacto de um fragmento inseguro atingir essa visualização.
O que isso não cobre – edição colaborativa, pilhas de desfazer e estruturas completas de editor estão fora do escopo
Esta página não promete edição colaborativa, um histórico completo de desfazer, um cliente de e-mail sofisticado ou uma estrutura de editor completa. Contenteditable não pode, por si só, decidir qual marcação um CMS de terceiros aceita, e uma lista de permissões baseada em string não é um substituto para um desinfetante de analisador HTML5 do lado do servidor, onde usuários não confiáveis podem enviar conteúdo. A visualização em sandbox é uma defesa separada da saída de limpeza; nem torna JavaScript arbitrários ou URLs hostis seguros em todos os destinos.
Conclusão: o editor é um DOM que você pode ver - resume o mecanismo e como o editor HTML WYSIWYG de ToolAcre expõe a marcação que sua formatação produz, sem sair do navegador
O editor é um DOM que você pode ver e inspecionar. O editor HTML WYSIWYG de ToolAcre oferece uma maneira direta de comparar uma ação de formatação visual com o HTML filtrado que ele produz, localmente em seu navegador. Digite uma nota descartável em negrito, mude para o modo de origem e mantenha apenas os elementos que seu destino realmente suporta.