Ferramentas para desenvolvedores · Editor HTML WYSIWYG
Enter vs Shift + Enter: como os editores escolhem entre <p>, <div> e <br>
· Como funciona
HTML conteúdo editável edição de texto
Explica o modelo de parágrafo por trás dos editores de navegador: por que Enter pode criar um <p> ou um <div>, por que Shift+Enter insere <br> e como isso decide seu espaçamento.
Por que o espaçamento está errado no CMS, mas está bom no editor - abre com o problema clássico de intervalo duplo ou sem intervalo
O espaçamento que parece confortável no editor pode mudar quando o fragmento entra em CMS porque os blocos recebem margens da folha de estilo de destino. Dois parágrafos e duas linhas separadas por br são estruturalmente diferentes, mesmo que uma visualização lhes forneça uma distância vertical semelhante.
ToolAcre expõe essa diferença na fonte. Ele não contém margens copiadas ou estilos embutidos, portanto, o espaçamento entre parágrafos vem do wrapper de visualização ou do destino posterior CSS. Os escritores devem escolher a estrutura pelo significado e verificar os elementos serializados em vez de adicionar teclas em branco até que uma visão temporária pareça correta.
Bloco versus quebras inline — explica que <p> e <div> são blocos com margens próprias, enquanto <br> é uma quebra de linha dentro de um bloco
Parágrafo e div são contêineres de bloco; br é um elemento de quebra de linha vazio dentro de outro fluxo. Este editor permite p e br, mas não div. Um div colado é desembrulhado, preservando suas palavras e descendentes permitidos enquanto descarta o wrapper. BR higienizado é emitido como `<br />`.
Um endereço postal pode ser um parágrafo com quebras de linha deliberadas porque suas linhas formam uma unidade. Dois pensamentos independentes são melhor representados como dois parágrafos. O destino pode estilizar margens p de forma consistente, enquanto elementos br repetidos usados como espaçadores verticais codificam a aparência diretamente no conteúdo.
O que Enter faz aqui depende do navegador e não é configurado por ToolAcre
ToolAcre não define um comando separador de parágrafo padrão ou intercepta Enter. O navegador editável por conteúdo lida com a chave e o ouvinte de entrada atualiza a saída posteriormente. As limitações do repositório alertam que o comportamento do mecanismo é diferente, portanto, afirmar que Enter sempre cria p, sempre cria div ou segue uma regra específica da versão seria uma orientação de compatibilidade inventada.
A etapa de higienização restringe então qualquer serialização que chegue. Uma div criada pelo navegador não pode sobreviver como div, embora seu texto possa permanecer. Isto pode fazer com que a fonte final seja novamente diferente da árvore intermediária viva. O modo fonte é, portanto, o lugar para estabelecer elementos p explícitos quando o significado estável do parágrafo é importante.
As pausas suaves podem ser escritas na fonte, mas nenhum contrato Shift+Enter é implementado
A barra de ferramentas não possui botão “soft break” e o código não registra Shift+Enter. Um navegador pode implementar esse gesto, mas este artigo não promete seu resultado. O modo fonte pode reter um br permitido, fornecendo uma maneira determinística de expressar uma quebra dentro de um parágrafo após inspecionar o resultado visual.
O comportamento do teclado também depende do estado de seleção e edição que o módulo não testa. Use o navegador exato envolvido em seu trabalho e leia o código-fonte. Se o gesto produzir um bloco indesejado, reescreva o fragmento explicitamente, em vez de confiar em uma descrição de atalho copiada de outra estrutura de editor.
Exemplo resolvido: crie um endereço e uma nota e depois inspecione em vez de prever
Para um endereço, use o modo fonte para fazer um p com br entre destinatário, rua e localidade. Para uma breve nota, faça dois elementos p. Retorne ao modo visual, onde a fonte é higienizada antes da inserção, e compare a visualização sem presumir que suas margens correspondam ao site final.
Em seguida, copie HTML e inspecione o fragmento separadamente em Download HTML. O resultado copiado contém marcação corporal higienizada; o download contém um documento completo com a visualização de ToolAcre CSS. Essa distinção pode explicar por que abrir o arquivo baixado parece mais completo do que colar o fragmento copiado em um sistema com estilos diferentes.
Parágrafos vazios e espaços inseparáveis são mantidos somente quando suportados pelo reescritor
Um parágrafo vazio permitido pode permanecer porque p é aceito e nenhuma regra exclui blocos vazios. Uma entidade conhecida de espaço ininterrupto pode se tornar seu caractere decodificado e posteriormente ser escapada de acordo com a implementação da entidade local; o código não fornece uma regra de limpeza direcionada especificamente aos parágrafos espaçadores.
Portanto, “Sanitise now” não é um limpador de layout. Ele remove marcações e atributos não suportados, equilibra tags e formata a fonte, mas pode reter o vazio estruturalmente permitido. Exclua os artefatos de espaçamento deliberadamente no modo de origem ou visual e deixe o destino CSS fornecer margens normais em vez de acumular blocos em branco.
O que isso não cobre — CSS regras de redução de margem ou configuração da estrutura do editor
Este artigo não cobre o colapso de margens, configuração do separador de estrutura, matrizes de teclado navegador por navegador ou peculiaridades de espaçamento de e-mail. Também não afirma que a visualização reproduza um CMS. A sandbox leve usa sua própria fonte de corpo, altura de linha, preenchimento e comportamento de quebra.
Nem trata os resultados filtrados como uma publicação universalmente segura. Um envio malicioso precisa de uma limpeza no servidor apropriada ao destino, mesmo que uma visualização local descartável permaneça inerte. A semântica dos parágrafos, o comportamento de edição do navegador e a política de segurança são três preocupações distintas que não devem ser resumidas em um teste de “parece certo”.
Conclusão: escolha a quebra que corresponde ao significado - resume o modelo e como o editor HTML WYSIWYG de ToolAcre permite verificar qual elemento cada chave produz
Escolha a quebra que corresponde ao conteúdo, mas verifique em vez de prever o pressionamento da tecla. ToolAcre fornece acesso direto à fonte, aceita p e br, desembrulha div e mostra uma renderização em sandbox. Esses fatos apoiam um fluxo de trabalho repetível sem inventar uma promessa sobre Enter ou Shift+Enter.
Crie um pequeno endereço e nota, alterne os modos duas vezes e garanta que a estrutura pretendida sobreviva à higienização. Se um destino aplicar lacunas surpreendentes, inspecione seu CSS em vez de inserir mais HTML vazios. O significado estável viaja melhor do que o espaçamento ajustado para uma visualização isolada.