Ferramentas para desenvolvedores · Editor HTML WYSIWYG
Uma breve história de WYSIWYG: do Bravo da Xerox PARC aos editores de navegador
· Fundo
HTML conteúdo editável fluxo de trabalho do desenvolvedor
Rastreia a edição do tipo "o que você vê é o que você obtém" desde os sistemas de pesquisa da década de 1970, passando por editoração eletrônica e construtores de páginas da Web, até os editores de conteúdo editável em todos os navegadores.
Antes de WYSIWYG, você formatava às cegas — abre com fluxos de trabalho de marcação e impressão e por que a edição visual foi revolucionária
Antes da edição visual, os autores geralmente escreviam códigos de controle ou marcações e visualizavam o resultado formatado posteriormente. O atraso tornou o layout iterativo: alterar instruções, renderizar novamente, comparar e repetir. Mostrar a formatação durante a composição encurtou esse ciclo e mudou o que os não especialistas esperavam do software de documentos.
Este artigo evita deliberadamente datas e primeiras datas exatas que o repositório não fornece de forma independente. Seu objetivo é explicar a linhagem de design por trás de uma superfície de edição do navegador, e não certificar uma cronologia histórica completa. Os marcos nomeados precisam de referências de arquivo antes da publicação como histórico factual do produto.
Os primeiros sistemas de documentos visuais estabeleceram a ideia; este repositório não fornece uma cronologia Bravo
Os sistemas de pesquisa associados à Xerox PARC são amplamente discutidos nas histórias WYSIWYG, e a pasta de trabalho chama-se Bravo. Nenhuma fonte de repositório fornecida aqui verifica sua data, conjunto de recursos ou prioridade sobre os contemporâneos, portanto, esses detalhes são omitidos em vez de parafraseados como fatos.
O marco conceitual defensável é uma exibição em bitmap combinada com a manipulação direta de documentos formatados. A tela tornou-se uma aproximação ativa da saída, em vez de apenas um local para digitar comandos. Essa relação entre a formatação visível e a estrutura subjacente ainda define as compensações dos editores modernos.
A edição visual chegou aos desktops dos consumidores; marcos exatos do produto exigem fontes de arquivo externas
A pasta de trabalho a seguir nomeia Xerox Star, MacWrite e editoração eletrônica. O sequenciamento exato e a influência exigem fontes além desta base de código. O que pode ser dito sem invenção é que a computação gráfica pessoal tornou a composição visual familiar a um público muito mais amplo e vinculou a edição às fontes, ao espaçamento e ao layout da página.
Esse modelo de desktop encorajou expectativas de páginas estáveis e dispositivos de saída controlados. Posteriormente, o conteúdo da Web complicou a promessa porque um fragmento HTML pode atender a muitas folhas de estilo, larguras e preferências do usuário. A frase “o que você vê” tornou-se menos literal à medida que a publicação passou de páginas semelhantes a papel para documentos responsivos.
Os construtores de páginas da década de 1990 expuseram a criação visual da web e suas compensações de marcação
Os construtores visuais de páginas da web trouxeram composição direta para HTML e tornaram-se associados a wrappers gerados e marcação de apresentação. Novamente, a apostila nomeia produtos específicos sem evidências de repositório para uma reputação ou cronograma detalhado. Este artigo limita o ponto ao compromisso duradouro da engenharia.
Uma ferramenta visual deve traduzir gestos em uma árvore e um barbante. Se for otimizado para aparência imediata, poderá emitir uma apresentação local que resiste ao redesenho posterior. Se restringir a saída, a fidelidade visual à fonte diminui. ToolAcre escolhe um subconjunto semântico restrito e mostra a fonte filtrada.
A edição avança para a página — explica como contenteditable trouxe WYSIWYG para navegadores e plataformas CMS
O conteúdo editável do navegador moveu o host de edição para um elemento de página comum. O navegador pode gerenciar caracteres de intercalação, seleções, digitação e exclusão enquanto o código do aplicativo fornece controles e lê innerHTML. ToolAcre segue esse modelo e atualmente envia ações da barra de ferramentas por meio do obsoleto execCommand.
O aplicativo então adiciona limites que o host de edição nativo não fornece: interceptação de colagem, higienização de fonte, relatório de remoção, contagem de caracteres e palavras, extração de texto simples, cópia, download e visualização inerte. Essa estratificação explica por que o conteúdo editável por si só não é um produto completo.
O contra-movimento favorece fontes restritas e edição estruturada, sem um cronograma de produto de origem
A marcação leve e os editores estruturados respondem à mesma preocupação com a qualidade da saída de maneira diferente. Eles restringem o que os autores podem expressar ou armazenar e, em seguida, apresentam um resultado controlado. A apostila solicita um contra-movimento histórico, mas nenhuma fonte aqui apóia uma data, reivindicação de adoção ou sequência causal nomeada.
A comparação útil é arquitetônica. Uma fonte restrita pode ser fácil de diferenciar e transformar, enquanto uma superfície visual reduz a barreira à formatação. ToolAcre combina desenho visual com HTML visível, mas não oferece colaboração, um modelo de documento ou comandos determinísticos entre navegadores.
O que isso não cobre - um cronograma produto por produto ou editoração eletrônica além de sua influência na web
Este artigo não fornece um cronograma produto por produto, não dá crédito a uma invenção, não cita pesquisadores ou cobre a editoração eletrônica além de ampla influência. Essas omissões são intencionais porque nenhuma fonte de arquivo foi fornecida. A implementação do editor pode verificar o comportamento atual, não a prioridade histórica.
Também não afirma que os editores visuais produzem necessariamente marcações ruins. A qualidade da saída depende do modelo e da política de edição. Aqui, aliases e listas de permissões reduzem a variação após a mutação do navegador, enquanto o modo de origem permite que o redator revise o que resta. Outros editores podem escolher estruturas diferentes.
Conclusão: a velha tensão ainda é o problema de design - resume a conveniência visual versus saída limpa e como o editor HTML WYSIWYG de ToolAcre aborda isso, permitindo que você veja a marcação que suas edições produzem
A velha tensão sobrevive: o controle visual direto ajuda os autores, enquanto a produção estruturada durável ajuda os sistemas e futuros mantenedores. Um editor confiável torna essa tradução visível e admite onde a renderização depende do navegador e do contexto de destino.
ToolAcre é um pequeno exemplo contemporâneo. Formate uma nota descartável, inspecione o HTML filtrado e compare a visualização com a fonte. O exercício demonstra a linhagem sem transformar um esboço histórico sem fontes em falsa precisão ou afirmar que esta implementação resolve todos os compromissos WYSIWYG.