Ferramentas para desenvolvedores · Editor HTML WYSIWYG
Por que execCommand está obsoleto e quais editores de navegador usam em seu lugar
· Como funciona
HTML conteúdo editável fluxo de trabalho do desenvolvedor
Abrange a ascensão e queda de document.execCommand, por que sua saída era inconsistente e como os editores modernos baseiam-se em Seleção, Intervalo e antes da entrada.
O botão em negrito de uma linha que deixou de ser seguro — abre com execCommand('bold') e o aviso de descontinuação
Um botão em negrito pode ser uma chamada: foque a superfície de edição e peça a `document.execCommand` para aplicar `bold` à seleção atual. ToolAcre ainda usa esse caminho porque o navegador possui o cursor e o intervalo selecionado dentro de seu elemento editável de conteúdo. A chamada compacta é conveniente, mas a conveniência não torna a árvore resultante previsível.
O código trata a recusa como uma possibilidade comum. Seu wrapper de comando captura uma exceção, anuncia que o navegador recusou a ação e direciona o gravador para o modo de origem. Essa alternativa é mais honesta do que prometer que um clique na barra de ferramentas sempre produz um elemento específico ou funciona de forma idêntica em todos os mecanismos.
O que o execCommand fez e de onde veio — explica sua origem no início do Internet Explorer e sua adoção por todos os navegadores
O mesmo wrapper conduz listas em negrito, itálico, não ordenadas e ordenadas, remoção de formatação, desfazer, refazer, formatação de bloco, links e desvinculação. Esses são os comandos realmente presentes na barra de ferramentas; este artigo não estende a lista com alinhamento, cores, fontes, tabelas, imagens ou outros recursos familiares de rich text que a implementação nunca expõe.
Cada comando é executado no DOM editável ao vivo. Posteriormente, o painel atualiza seu relatório de origem, visualização, contagem de palavras e remoção do innerHTML atual. O resultado salvo não é, portanto, um log de comando. É uma serialização filtrada de qualquer estrutura que o navegador deixou após realizar ou recusar a operação solicitada.
Por que o comando API está obsoleto: os navegadores podem produzir diferentes formas DOM
A descontinuação é importante porque API não fornece ao autor do editor um contrato estrutural preciso para cada mutação. As limitações ToolAcre alertam explicitamente que o comportamento difere entre os mecanismos, especialmente em relação a listas aninhadas. Uma lista visível pode ser aceitável enquanto suas opções de aninhamento ou wrapper diferem da marcação produzida por outro navegador.
Nenhuma fonte de repositório suporta a afirmação de que cada navegador, versão ou comando tem um resultado de compatibilidade específico. A declaração segura é mais restrita: esta implementação chama o obsoleto API, captura a recusa e oferece edição direta do código-fonte como uma saída de emergência. Teste o navegador e a operação que você pretende usar em vez de extrapolar uma matriz.
Seleção e Alcance são alternativas relevantes, mas esta ferramenta não as implementa
Seleção e intervalo podem descrever limites DOM selecionados e suportar manipulação explícita de árvore, mas ToolAcre não implementa um mecanismo de formatação de substituição com eles. Nomear essas APIs como se fossem o caminho do código atual descreveria incorretamente o produto. Aqui, o comando do navegador continua sendo o modificador e o desinfetante continua sendo o limite de saída.
Um modelo customizado poderia possuir marcas, blocos, transações e mapeamento de seleção, mas essa é uma arquitetura de produto diferente com testes diferentes. Este editor leve evita deliberadamente reivindicar tais máquinas. Seu contrato revisável é que as ações visuais podem criar DOM dependente do navegador, enquanto o modo de origem revela a marcação filtrada que será realmente copiada ou baixada.
beforeinput não faz parte do caminho de formatação deste editor
A implementação também não intercepta `beforeinput` para traduzir intenções de edição em transações personalizadas. Os eventos de entrada apenas acionam uma atualização depois que o navegador altera a superfície. Colar e soltar são exceções: esses eventos são evitados, sua área de transferência ou carga útil de transferência é filtrada e apenas o HTML resultante ou texto simples é inserido.
Essa distinção impede uma reivindicação arquitetônica ampla. ToolAcre possui o portão de colagem, mas não todas as mutações de pressionamento de tecla. Digitação normal, exclusão, comportamento de entrada e comandos da barra de ferramentas permanecem operações de edição do navegador. O sanitizador analisa sua saída serializada; ele não transforma o editor em uma estrutura orientada por beforeinput nem normaliza cada mutação DOM intermediária.
Exemplo resolvido: inspecione a saída do comando legado que este editor realmente produz
Para uma verificação concreta, digite duas frases curtas, selecione uma frase e pressione Negrito. Mude para a fonte HTML e inspecione o elemento em torno dessa frase. ToolAcre mapeia `b` herdado para `strong` durante a sanitização, para que o resultado filtrado possa ser semântico mesmo quando o comando de edição ao vivo escolheu inicialmente uma tag legada.
Repita com uma lista e depois desfaça. A barra de ferramentas envia `insertUnorderedList` e `undo`; ele não mantém um histórico de aplicativos separado. Se o navegador recusar, a região de status informa isso. Se o aninhamento parecer estranho, o modo de origem é o caminho de correção suportado. A saída observada, e não o rótulo do botão, é a evidência.
O que isto não cobre: nenhuma arquitetura de editor de substituição é implementada aqui
Este artigo não reivindica suporte para um sistema de comando de substituição moderno, transações colaborativas, árvores determinísticas entre navegadores ou uma pilha de desfazer personalizada. Também não infere o comportamento dos atalhos de teclado porque a origem define as ações da barra de ferramentas, não um registro de atalhos. Os recursos não suportados permanecem como omissões, em vez de recursos implícitos.
A segurança é separada da escolha do comando. Os filtros da lista de permissões emitiram marcação e a visualização é colocada em área restrita sem scripts, mas o sanitizador rejeita explicitamente o uso como um filtro XSS de entrada hostil geral. Um servidor que aceita conteúdo de publicação não confiável ainda precisa de um higienizador de analisador HTML5 do lado do servidor apropriado e de uma política específica de destino.
Conclusão: possua o DOM, não o comando — resume o caminho de migração e como a marcação resultante é o que você inspeciona em uma ferramenta WYSIWYG-to-HTML
Possui o resultado que você pode inspecionar. Neste editor, um comando solicita ao navegador que altere uma árvore com conteúdo editável e, em seguida, a lista de permissões reescreve a serialização dessa árvore no subconjunto compatível. O modo de origem expõe a transferência e fornece uma superfície prática de reparo quando o comportamento de edição do navegador é inconveniente ou inconsistente.
Use uma amostra descartável no mesmo navegador do seu trabalho real. Exercite apenas os comandos enviados, inspecione links e aninhamentos, teste o desfazer antes de confiar nele e copie o HTML filtrado somente após lê-lo. Esse fluxo de trabalho respeita a suspensão de uso sem fingir que ToolAcre já substituiu a edição subjacente API.