Os melhores editores HTML WYSIWYG gratuitos para a Web

Um editor WYSIWYG é a biblioteca que transforma um campo de texto num pequeno processador de texto dentro da página. Mais do que as funcionalidades, o que decide são duas coisas: a licença, porque várias bibliotecas históricas mudaram nos últimos anos, e a qualidade do HTML que produzem.

A sigla significa «what you see is what you get» (o que vês é o que obténs): quem escreve vê o texto já formatado em vez das tags e, normalmente, pode passar para a vista do código-fonte para o retocar. Encontras isto em painéis de administração, CMS e em qualquer lugar onde alguém que não conheça HTML precise de publicar algo.

Nas capturas de ecrã todos se assemelham; as diferenças notam-se quando o projeto cresce.

Como escolher #

Licença. É o primeiro filtro. Algumas bibliotecas passaram de licenças permissivas para licenças copyleft ou comerciais: num produto fechado, podem trazer obrigações que não tinhas previsto.
Peso. Um editor completo pode ultrapassar algumas centenas de kilobytes. Num painel interno não importa, numa página pública sim.
Limpeza do HTML. A verdadeira prova é quando alguém cola um texto do Word: os editores sérios removem a formatação inútil, os outros deixam passar e enchem a base de dados de estilos.
Extensibilidade. Carregamento de imagens, menções, tabelas, modelos: verifica se a funcionalidade que precisas está incluída ou se é um módulo pago.
Acessibilidade e telemóvel. Só se testam no terreno: alguns editores tornam-se inutilizáveis num ecrã pequeno.

As principais opções #

Editor	Licença	Ponto forte
CKEditor 5	GPL 2+ ou comercial	O mais completo, muito cuidado
TinyMCE	GPL 2+ ou comercial	Grande difusão e documentação
Froala	Comercial	Interface muito cuidada, rápida
Quill	BSD	Leve, ótimo para apps modernas
Tiptap	MIT (módulos Pro pagos)	Baseado em ProseMirror, muito flexível
Lexical	MIT	Da Meta, pensado para React
Editor.js	Apache 2.0	Produz blocos em JSON, não HTML
Jodit	MIT (versão Pro paga)	Sem dependências externas
Trix	MIT	Simples, integrado com Ruby on Rails
Summernote	MIT	Imediato, baseado em Bootstrap

CKEditor 5 #

É o mais maduro do grupo, e existe há mais de vinte anos: edição colaborativa em tempo real, gestão avançada de imagens, tabelas completas, fórmulas, controlos de acessibilidade e um “colar” do Word que funciona. Com a arquitetura de plugins, incluis apenas o que precisas.

A licença é dupla: GPL 2 ou posterior para projetos open source compatíveis, ou uma licença comercial que remove as restrições do copyleft e desbloqueia funcionalidades premium, como colaboração, exportação para Word e PDF e o assistente baseado em inteligência artificial.

Se o teu produto é fechado, precisas da licença comercial. A partir da versão 44, no final de 2024, até o uso sob GPL exige indicar uma chave de licença ('GPL') na configuração.

Área de escrita do CKEditor 5 com a barra de ferramentas, uma imagem e uma citação inseridas — A barra de ferramentas compõe-se plugin a plugin, incluindo apenas o que é necessário

TinyMCE #

Durante anos foi o editor por excelência (era o motor do Classic Editor do WordPress), e continua a ser aquele com mais documentação e integrações prontas. Nota importante: com a versão 7, em 2024, passou da licença MIT para a GPL 2 ou posterior. Se o tinhas usado num produto proprietário contando com os termos antigos, verifica a tua situação e, se necessário, passa para a licença comercial.

Aqui também as funcionalidades mais requisitadas pelas empresas são pagas, começando pelo PowerPaste, que limpa o texto colado do Word e Excel. Continua a ser uma escolha sólida, desde que consultes a licença antes e não depois.

Editor TinyMCE com a barra de menus, as ferramentas de formatação e o contador de palavras — TinyMCE: menus clássicos e muitos plugins, gratuitos e pagos

Froala #

É comercial desde o início, sem versão gratuita para produção, mas tem provavelmente a interface mais agradável do grupo: barra de ferramentas que se adapta ao ecrã, popups contextuais, tabelas elegantes e um arranque rapidíssimo. Se tens orçamento e a experiência de quem escreve conta, merece uma tentativa.

Quill #

Leve, com uma arquitetura limpa e o seu próprio modelo de documento (Delta) em vez do simples HTML. Após anos de pausa, a versão 2.0 saiu em 2024, sendo muito utilizada em aplicações modernas onde se precisa de um editor previsível e fácil de controlar via código.

Não tem a riqueza do CKEditor em tabelas e conteúdos complexos, mas para comentários, descrições e textos de média extensão é mais do que suficiente.

Tiptap e Lexical #

São os dois nomes novos que muitos desenvolvedores escolhem hoje. O Tiptap baseia-se no ProseMirror, tem uma excelente integração com React, Vue e outros frameworks, e permite-te construir a interface que quiseres; a colaboração e alguns módulos são pagos. O Lexical é o editor desenvolvido pela Meta, leve e pensado sobretudo para React. Ambos exigem mais trabalho inicial do que um editor “pronto a usar”, porque a barra de ferramentas tu é que a constróis.

Editor.js #

Funciona de forma diferente dos outros: em vez de produzir HTML, devolve uma estrutura de blocos em formato JSON. Cada parágrafo, imagem ou citação é um bloco com os seus próprios dados.

É uma vantagem quando o conteúdo precisa de ser reutilizado em diferentes locais, como sites, apps e newsletters, porque a apresentação tu é que decides quando os mostras. É uma desvantagem se só precisares de HTML para guardar e mostrar.

Jodit, Trix e Summernote #

Jodit é escrito em TypeScript sem dependências e tem uma boa relação entre peso e funcionalidades, incluindo um pequeno editor para cortar e redimensionar imagens. É MIT, com uma versão Pro paga para o gestor de ficheiros avançado e outras funções.

Editor Jodit com a barra de ferramentas e a janela para inserir um link — Jodit: leve e sem dependências

Trix nasceu no mundo Ruby on Rails, é deliberadamente minimalista e produz markup muito limpo.

Summernote apoia-se em jQuery e Bootstrap e configura-se em poucas linhas; o modo Air esconde a barra e mostra os botões apenas quando selecionas o texto. É a escolha rápida para um painel interno, embora as atualizações sejam mais lentas do que as do CKEditor ou TinyMCE.

Módulo com título e conteúdo gerido por Summernote com a barra de ferramentas em estilo Bootstrap — Summernote: integra-se num módulo Bootstrap em poucas linhas

Licenças alteradas pelo caminho. Diversas bibliotecas desta categoria passaram de licenças permissivas para licenças copyleft ou comerciais. Se estás a atualizar um projeto iniciado há anos, verifica que licença cobre a versão que vais instalar: a versão antiga mantém-se sob os termos originais, a nova não.

Três coisas que se descobrem tarde #

O HTML recebido deve ser filtrado no servidor. Nenhum editor substitui este passo: qualquer pessoa pode enviar para o teu site conteúdos escritos à mão, saltando a interface. Precisas de uma biblioteca de sanitização no servidor (por exemplo, HTML Purifier em PHP ou DOMPurify com Node), caso contrário permites que alguém execute código no browser dos outros visitantes.

O carregamento de imagens normalmente não está incluído. O editor dá-te o botão, mas a parte que recebe o ficheiro (controlo, redimensionamento, gravação) tens de a escrever tu.

Colar do Word é o teste decisivo. Antes de escolheres, cola no editor um documento real cheio de estilos e observa o HTML que sai. É o teste que separa as bibliotecas maduras das outras.

Ferramenta online de limpeza de HTML com o editor visual à esquerda e o código cheio de estilos inline à direita — À direita o código que resta após colar um documento Word: estilos inline por todo o lado

Como escolher com base no projeto #

Site ou aplicação open source: CKEditor 5 ou TinyMCE na versão com licença copyleft.
Produto comercial fechado: Quill, Tiptap, Lexical, Jodit, Trix ou Summernote, que têm licenças permissivas; ou a licença comercial do CKEditor, TinyMCE ou Froala.
Painel interno para fazer depressa: Summernote ou Jodit.
Conteúdos estruturados para reutilizar noutro lado: Editor.js.
Precisas de edição colaborativa em tempo real: CKEditor com licença comercial, ou Tiptap com os seus módulos pagos.
Aplicação React feita à medida: Lexical ou Tiptap.

Perguntas frequentes #

Qual é o melhor editor WYSIWYG gratuito? #

Para funcionalidades completas, o CKEditor 5, desde que a licença copyleft seja compatível com o teu projeto. Se o produto for fechado e não quiseres comprar uma licença, o Quill é o melhor compromisso entre leveza, licença permissiva e qualidade do resultado; Tiptap se estiveres disposto a construir a tua própria interface.

Estes editores são seguros contra ataques de tipo XSS? #

Ajudam, mas não chegam. Os editores filtram o conteúdo no browser, e esse filtro pode ser contornado enviando os dados diretamente para o servidor. A limpeza deve ser feita no servidor antes de guardar e, melhor ainda, também antes de mostrar.

Posso usá-los com React, Vue ou Angular? #

Sim, os principais têm componentes oficiais para os frameworks mais difundidos. Verifica, porém, se o componente está atualizado para a versão do framework que usas: é aí que surgem a maioria das incompatibilidades.

É melhor guardar HTML ou JSON na base de dados? #

O HTML é imediato de mostrar, mas prende o conteúdo a uma única apresentação. O JSON por blocos, como o do Editor.js, exige um passo extra para a visualização, mas torna os conteúdos reutilizáveis em diferentes canais. Para um blog, o HTML serve perfeitamente; para conteúdos destinados a sites, apps e newsletters, o formato estruturado compensa.

Um editor WYSIWYG sobrecarrega muito a página? #

Depende da configuração. Com bibliotecas modulares, incluis apenas os plugins de que precisas e o peso diminui bastante. Em qualquer caso, carrega o editor apenas nas páginas onde é necessário, não em todo o site.

Qual é o melhor editor WYSIWYG para WordPress? #

O WordPress usa o editor de blocos Gutenberg, que não é uma destas bibliotecas. O antigo Classic Editor, ainda disponível como plugin, baseia-se no TinyMCE. As bibliotecas desta guia servem se estiveres a desenvolver o teu próprio CMS, um painel ou uma aplicação.

O HTML produzido é bom para SEO? #

Se o editor for bom e quem escreve usar os títulos como títulos e não como texto aumentado, sim. O problema surge com o código colado do Word e com os <span>cheios de estilos: mantém o output limpo e, se puderes, limita na barra as opções que levam a markup inútil, como fontes e tamanhos personalizados.