Ferramentas para desenvolvedores · Editor HTML WYSIWYG
O que acontece quando você cola do Word ou Google Docs em um editor da web
· Como funciona
HTML conteúdo editável limpeza de texto
Explica o que as pastas de rich text carregam, desde estilos mso até elementos wrapper e pilhas de fontes, e mostra como ler a marcação resultante antes que ela chegue ao seu site.
Parecia bom no Word – abre com um artigo colado cujo espaçamento e fontes combatem o design do site
Um parágrafo copiado de um processador de texto pode parecer polido na fonte e chegar com fontes, espaçamentos e wrappers que entram em conflito com o site. ToolAcre não preserva essa apresentação no atacado. Seu ouvinte paste intercepta a operação antes que a marcação rica original seja inserida e, em vez disso, escolhe uma representação filtrada.
A evidência importante é a visão da fonte, e não se a primeira impressão visual se assemelha ao documento original. O editor é intencionalmente restrito: títulos, parágrafos, ênfases, listas, citações, elementos semelhantes a códigos e links podem sobreviver, enquanto contêineres de layout, nomes de classes, ids e atributos de estilo embutidos não pertencem ao seu contrato de saída.
A área de transferência carrega mais do que texto - explica que uma cópia em rich text inclui um tipo HTML junto com texto simples
Uma área de transferência pode expor `text/html` e `text/plain` para uma operação de cópia. O manipulador pede ambos. Quando existe uma carga útil HTML, ela limpa essa string e insere o fragmento reescrito com `insertHTML`; somente quando rich HTML está ausente ele insere a carga útil simples com `insertText`.
Essa precedência é comprovada por código para este painel, e não uma declaração universal sobre todas as aplicações. Isso explica por que uma pasta rica pode manter uma lista enquanto perde sua aparência. O aplicativo de origem escreveu a área de transferência HTML, mas a lista de permissões de ToolAcre decide qual parte é admitida na superfície editável.
O que este editor remove do rich paste: elementos, atributos e comentários não suportados
Elementos não suportados são tratados de duas maneiras. Wrappers comuns desconhecidos são desembrulhados para que suas palavras permaneçam, enquanto script, estilo, iframe, formulário, SVG, MathML e outros contêineres arriscados ou não-editores são removidos junto com seu conteúdo. Comentários e doctypes também são descartados em vez de serem incluídos no rascunho.
Os atributos enfrentam um segundo portão. Classe, id, estilo, atributos de dados e todos os manipuladores de eventos são removidos porque os atributos permitidos são nomeados por elemento. Isso significa que os nomes de classe específicos da fonte e a apresentação embutida não podem combater a folha de estilo de destino depois que ToolAcre filtrou a colagem, embora o estilo de origem útil também possa desaparecer.
Por que wrappers e estilos específicos de origem não sobrevivem à lista de permissões
O repositório não fornece acessórios capturados do Word ou do Google Docs, portanto, este artigo não inventa classes `mso-` exatas, ids internos ou sequências de wrapper para versões específicas. Ele pode indicar a consequência provada pela lista de permissões: classes e estilos são removidos independentemente de qual aplicativo de origem os forneceu.
Essa regra independente da fonte é uma orientação editorial mais forte do que um catálogo frágil. Inspecione o aviso de remoção após colar. Ele registra motivos exclusivos, como wrapper não suportado, atributo proibido ou URL rejeitado. O relatório informa o que essa implementação descartou sem pretender identificar o aplicativo que gerou originalmente cada fragmento.
Exemplo resolvido: cole três parágrafos e leia a marcação filtrada
Copie três parágrafos curtos, deixando a frase do meio em negrito e a última em uma lista. Depois de colar, mude para o modo de origem. Os elementos parágrafo, forte, ul e li estão dentro da lista de permissões, enquanto os divs adjacentes são desembrulhados e os atributos de estilo desaparecem. As tags herdadas b e i são normalizadas para fortes e em.
Agora adicione um atributo de evento inseguro em uma amostra de origem descartável e retorne ao modo visual. O atributo é removido antes que a origem se torne DOM. Isto demonstra um limite de edição e não uma publicação segura de submissões hostis. O projeto alerta explicitamente sobre os diferenciais do analisador e requer um desinfetante adequado no lado do servidor para conteúdo não confiável.
A colagem de texto simples é usada somente quando a área de transferência não fornece nenhum sabor HTML
A inserção de texto simples é um substituto, não um comando “colar sem formatação” selecionável pelo usuário nesta barra de ferramentas. Se a área de transferência fornecer HTML, ToolAcre assumirá essa ramificação. Um atalho do navegador ou do sistema operacional pode expor uma colagem simples, mas o repositório não define nem promete um comportamento específico do atalho.
Quando apenas texto está disponível, `insertText` pede ao navegador para colocar esses caracteres no cursor. Qualquer estrutura de parágrafo criada posteriormente permanece sujeita ao comportamento de edição do navegador. Use a visualização de origem para adicionar títulos ou listas deliberados, em vez de assumir que as quebras de linha de outro aplicativo se tornam automaticamente a estrutura que seu CMS espera.
O que isso não cobre: regras de limpeza automática, filtros de colagem específicos de CMS ou preservação de alterações rastreadas
Este fluxo de trabalho não preserva alterações controladas, comentários, layout de página, fontes, cores, tabelas ou imagens. As imagens estão deliberadamente ausentes porque uma imagem permitida cria uma solicitação de saída e uma superfície de tratamento de erros. O editor também não possui perfil de limpeza específico da fonte ou switch que prometa fidelidade a um pacote de escritório.
Colar localmente não prova que o destino final aceitará o mesmo subconjunto. Um CMS pode remover mais tags, reescrever links ou impor sua própria política. Compare a saída do editor com a documentação de destino e mantenha uma cópia original quando a perda de formatação não suportada removeria informações em vez de mera apresentação.
Conclusão: olhe antes de publicar — resume o hábito de inspeção e como o editor HTML WYSIWYG de ToolAcre permite colar localmente e ver a marcação antes que ela vá para qualquer lugar
Veja antes de publicar: cole um fragmento representativo e não confidencial, leia o aviso de remoção, examine a fonte e visualize o resultado filtrado. ToolAcre fornece uma lista de permissões explícita em vez de transportar silenciosamente apresentações estrangeiras para o seu site. Isso torna a limpeza visível, mas não certifica HTML arbitrário como seguro.
Se a estrutura essencial desapareceu, reconstrua-a com títulos, parágrafos, listas, ênfases e links suportados. Se o alvo aceitar menos, simplifique ainda mais aí. O artefato correto não é a imitação visual mais próxima do documento de origem; é uma marcação revisada cujo significado e política de destino são compreendidos.