EDITORES WYSIWYG



2008-05-14

EDITORES WYSIWYG

Introdução

WYSIWYG ( What you see is what you get ) em português algo como “O que você vê é o que você obtém” é uma tecnologia que permite a você produzir código HTML de uma forma visual. Ao fazer uma tabela, por exemplo, você não precisa conhecer o código HTML da mesma, apenas selecione o número de linhas e colunas e a tabela será exibida. Com esta tecnologia, você será capaz de adicionar de maneira fácil e rápida um conteúdo bastante rico.

Neste documento iremos analisar alguns destes editores. Todos eles são “ Cross browser ”, ou seja não precisam ser instalados nas máquinas clientes para que funcionem, e são baseados em JavaScript.

Esta revisão inclui os editores abaixo:


  • HTMLArea v3
  • FckEditor v2
  • XOOPS XK_Editor (koivi) v1.0.5
  • Spaw 1.1
  • TinyMCE 1.42

Detalhes:

1 ) Os resultados se referem especificamente as versões relatadas acima. Os resultados podem ser diferentes em outras versões.

2) Os testes foram realizados em vários computadores e tipos de navegadores. Por isso seus resultados são bastante verossímeis. Porém não existe nenhuma garantia de que você não vá obter resultado contrário.

htmlArea

FckEditor :

XK_Editor:

Spaw:

TinyMCE:

Aparência

Começamos pelo que você vê. Uma interface atrativa sempre contribui para chamar atenção dos usuários. Vamos ver uma tabela comparativa.

htmlArea FckEditor XK_Editor Spaw TinyMCE

Suporte a skins

• • • •

Múltiplos estados dos botões

• •

• •

– htmlArea não tem suporte a skins. Tudo o que se pode fazer é editar os botões padrão.
– FckEditor, XK_Editor e Spaw tem suporte a múltiplas skins. O TinyMCE tem um poderoso suporte a skins baseados em templates.
– O FckEditor tem a melhor integração com CSS.
– O Xk_Editor é o único que não altera o estado dos botões enquanto você está no interior do conteúdo. Visualmente, é algo ruim, mas que melhora o desempenho global.
– O Spaw tem o estilo mais original. Fckeditor, TinyMCE e htmlArea são apenas cópias do estilo do Microsoft Office e o XK_Editor tem o estilo dos botões do XOOPS.
– O Spaw tem o método mais lento para atualizar a barra de ferramentas, ela muda as imagens em vez de mudar seu estilo. O editor precisa carregar imagens 04 para cada botão, o que é terrível para conexões lentas. A atualização das barras atualmente não funciona nos navegadores baseados na engine Gecko.
– O TinyMCE é o mais completo nesta primeira análise, em contrapartida é mais difícil de fazer skins para ele.

Formatação básica (negrito, itálico, etc...) Aplicação de estilos Códigos XOOPS ([b], [quote], [code], etc...) Lozalizar / Substituir Remover formato Word Inserir símbolos Suporte a Xhtml Suporte a plugin’s Menus de contexto Verificação ortográfica Barra de status Aumentar o Editor Barra flutuante Minimizar Barra de Ferramentas Opções avançadas de edição da tag BODY

htmlArea

• • • • • • • •

• •

FckEditor XK_Editor

• • •

• •

Spaw TinyMC E

-O htmlArea dá a possibilidade de acrescentar lista de estilos ordenada. Tal como outras soluções seletoras de estilo dropdown a deste editor apresenta problemas. Quando você aplica alguns estilos fica difícil removê-lo sem editar o html. A barra de status é muito completa, usuários avançados podem ver e selecionar o código html. Você deve abrir um popup para escolher uma cor. A barra de ferramentas muda para mostrar os botões permitidos. A função Desfazer executa algumas vezes. -Todos os dropdowns do FckEditor mostram um preview bastante agradável. Você pode colar texto diretamente de forma simples, eliminando o formato Word. -O XK_Editor é uma ótima opção para ver a barra de ferramentas flutuante. A barra de ferramentas não muda de acordo com os botões que são permitidos. Este editor não suporta plug-ins, por isso é difícil para que os usuários finais acrescentem novas funções. Alguns formatos de limpeza funcionam. -O Spaw é o menos completo pois carece de algumas funções. Você pode viver sem elas, mas elas também podem ser muito úteis. -Tal como htmlArea , o TinyMCE tem uma boa barra de status. As cores são selecionadas a partir de um popup. Ao final ele é um pouco lento.

Inserção rápida de tabela Inserir tabela Inserir linha Excluir linha Inserir coluna Excluir coluna Inserir célula Excluir célula Mesclar células Mesclar colunas Editar tabela Editar linha Editar célula Bordas de linhas Bordas de linhas avançadas Pré-visualização

htmlArea

• • • • • • • • • • • •

• •

FckEditor XK_Editor

• • •

• •

Spaw TinyMC E

– O htmlArea é realmente o mais poderoso para gerenciar tabelas. Às vezes se apresenta um pouco lento mostrando caixas de diálogos no Internet Explorer. Possui um menu contextual completo e permite adicionar linhas e colunas antes e depois. ? Falha quando tenta-se remover uma coluna de uma tabela com apenas uma coluna. Mas este último não é um problema grave (se você não quiser a tabela basta removê-la).
– O FckEditor também possui um menu contextual. É muito elegante e mais rápido do que o htmlArea. ? Possui opção de adicionar legenda a tabela, mas não acrescenta texto em browsers movidos pelas engines gecko (você pode adicionar manualmente). Se você estiver usando o Internet Explorer vai encontrar dificuldade em mesclar células sem conteúdo.
– O XK_Editor é o único que pode controlar todas as bordas da tabela e das células separadamente. Tem a opção de inserir tabelas de maneira rápida, além de um rápido alinhamento de célula e gerenciamento de cores das mesmas. Significa que você não precisa abrir qualquer popup para fazer estas alterações. O editor não oferece uma ferramenta para configurar as propriedades de linha, mas oferece esta possibilidade no gerenciamento de células e tabelas. Apresenta menu contextual. – ? Em navegadores baseados na engine Gecko o Spaw é muito pobre no gerenciamento de tabelas, sendo praticamente nulo. Mas neste teste foi usado uma versão beta, podendo ser a versão final mais completa. Não possui menus contextuais.

– O TinyMCE apresenta propriedades de linha, mas no geral apresenta poucas opções. Todas as funções necessárias estão implementadas e para muitos usuários isso já é suficiente. Ele não possui menus contextuais.

htmlArea FckEditor XK_Editor Spaw TinyMCE

Gerenciador de imagens do XOOPS • ? ? ?• Classe de imagens ???? Alinhamento de imagens ???? Alterar tamanho de imagens ???? Gerenciamento da Tag alt ???? Informações avançadas ? ?? • Cor de bordas • ? ? ?• Bordas avançadas • ? ? ?• Funções JavaScript • • ? ? Margens avançadas • ? ? ?• Pré visualização ????

O editor htmlArea oferece poucas opções de manipulação de imagem, mas possui um monte de plug-ins para gerenciamento de imagens disponíveis. Como a análise aqui não leva em conta plug-ins externos o htmlArea apresenta aqui o pior resultado.
O FckEditor possui uma guia avançada de propriedades de imagens. Usuários avançados podem especificar id, descrição da url, etc. E resumo ele possui competente gerenciamento de imagens interno.
O Xk_Editor é o único que pode especificar bordas com cores e largura, além de ser o único que pode gerenciar todas as margens de imagens. Integra-se ao Gerenciador de imagens do XOOPS.
O Spaw tem uma opção muito interessante imagens em pop-ups.
O TinyMCE não visualiza imagens, mas apresenta possibilidades de adicionar as propriedades onmouseover e onmouseout nas mudanças de imagem.

Gerenciamento de imagem alternativa do TinyMCE

Como você pode ter notado todos os editores são bastante completos. Portanto, talvez você precise analisar outros aspectos para escolher qual editor usar. Alguns destes podem ser o tempo de carregamento, a estabilidade ou os requisitos de memória. Em relação a memória, todos os casos apresentaram uso de cerca de 20 a 30 Mb no Internet Explorer e de 25 a 35 Mb no uso do Firefox. Mas informações sobre o uso da memória mudam continuamente e talvez este não seja o aspecto mais fiável.

Para os testes de velocidade todos os editores foram enviados a um servidor. Para obter a real diferença, já que o teste foi realizado sobre uma conexão de banda larga, foi realizado um "underclock". Isto significa que usando o programa NetLimiter (www.netlimiter.com) a conexão foi limitada a 5 Kb/s.

Todos os editores foram configurados para o modo completo, com todas as opções

ativadas possíveis. Veja os resultados:

htmlArea FckEditor XK_Editor Spaw TinyMCE

Velocidade em segundos

42

37

32

31

48

Se você possui banda larga não notará muita diferença entre a velocidade dos editores. Mas se a sua conexão for lenta leve em conta esta diferença.

– O FckEditor sob o Firefox apresenta algumas falhas enquanto você digita. Mas lembramos que a versão deste teste não é a versão definitiva.
– O Xk_Editor não atualiza a barra de ferramentas. Ele pode ser executado um pouco mais rápido.
– Como no Spaw a barra de ferramentas já está construída quando o cliente recebe as informações de HTML ele carrega mais rápido se você usar um computador antigo. Comum PC com mais de 500MHz de CPU isto não é tão significativo.
– O TinyMCE foi o mais lento neste teste. A razão principal é porque usa mais imagens. ? Mais do que uma instância ao mesmo tempo em determinadas circunstâncias pode deixar o sistema mais lento. O mais poderoso sistema de skins paga o preço neste quesito. Como aumentam o número de arquivos, ele precisa de mais tempo para carregar.


Esperávamos encontrar mais diferenças entre os editores no que se refere a velocidade, mas não existem tantas diferenças assim.

Os editores htmlArea, FckEditor e TinyMCE são escritos em JavaScript orientado a objeto. Já os editores Spaw e XK_Editor estão sob a linguagem Php orienteda a objetos. A estratégia entre as duas possibilidades é diferente. No primeiro grupo o cliente baixa os arquivos js, e o navegador os lê e constrói o editor. No spaw e no XK_Editor os arquivos js são lidos ao mesmo tempo em que o layout do editor é construído pelo servidor. Os primeiros também são independentes de plataforma, já os demais precisam de um servidor PHP.


HTML

O HTML do htmlArea não foi o melhor deste teste, mas ele é maravilhoso em comparação ao das versões mais antigas. Não adiciona quebras de linha e o código é difícil de ler.

O FckEditor tem alguns problemas. E no Internet Explorer é muito confuso duplicar o código.

Os problemas com a duplicação de código foram resolvidos no XK_Editor. Este era um problema recorrente nas versões mais antigas.

No Spaw o editor de código não é muito limpo. O editor também não acrescenta quebras de linha ao código HTML, é difícil de ler o código.

O TinyMCE realiza um bom trabalho.

Conclusões

Se você quiser uma melhor manipulação de tabelas, muitos plug-ins e menus de contexto a sua escolha deve ser pelo HtmlArea , um dos melhores editores testados. Se o que você quer é o mesmo, mas com suporte a Xhtml e uma avançada edição das propriedades de imagem, a sua escolha deve ser pelo FcKeditor. Se os seus problemas de desempenho sobre a engine Gecko forem resolvidos este será um dos mais avançados entre os testados.

TinyMCE está entre o htmlArea e o FckEditor, tem algumas poucas opções de gerenciamento de tabelas mas possui funções interessantes no que se refere a JS. Possui a melhor manipulação de temas disponibiliza alguns plug-ins muito úteis. Possui também uma boa saída HTML. E embora possua “tiny” no nome que em português significa “minúsculo”, de pequeno ele não tem nada pois tem um monte de funções, sendo bastante completo.

O Spaw não tem milhares de funções, mas tudo aquilo que ele faz é bom, limpo e rápido (sob o Internet Explorer). Sua interface é realmente amigável e atraente. A saída HTML dele é horrível. A forma como a barra de ferramentas dele é atualizada não é muito boa. O suporte a este editor sobre a engine Gecko está longe de ser concluído, mas ele é muito aceitável usando o navegador Internet Explorer.


O XK_Editor foi feito para ser executado com o XOOPS, o que faz a diferença neste teste. Emoticons do XOOPS, gerenciador de imagem integrado, de acordo com o css do tema, códigos e citações XOOPS. Estas são algumas das vantages do editor. Possui o mais poderoso gerenciamento de margens e bordas entre os editores testados. O carregamento dele é mais rápido, mas seu visual é um tanto quanto estático. É o mais completo editor para ambiente XOOPS. Também possui suporte a XHTML.


Reblog this post [with Zemanta]
Postar um comentário