---
title: "Os melhores editores HTML WYSIWYG gratuitos para a Web"
description: "Comparamos CKEditor, TinyMCE, Quill e outras bibliotecas: funções, licenças e como escolher o editor de texto rico ideal para o teu site ou app."
url: "https://www.alemasone.com/pt/melhores-editores-html-wysiwyg-gratuitos/"
language: "pt"
published: 2024-06-07
updated: 2026-09-19
categories: ["Programação E Desenvolvimento"]
translations:
it: "https://www.alemasone.com/it/migliori-editor-html-wysiwyg/"
en: "https://www.alemasone.com/en/best-free-wysiwyg-html-editors/"
es: "https://www.alemasone.com/es/mejores-editores-html-wysiwyg-gratuitos/"
fr: "https://www.alemasone.com/fr/meilleurs-editeurs-html-wysiwyg-gratuits/"
de: "https://www.alemasone.com/de/beste-kostenlose-html-wysiwyg-editoren/"
---
# 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](/pt/como-abrir-ficheiros-texto-gigantes/): 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](https://ckeditor.com/) 5 | GPL 2+ ou comercial | O mais completo, muito cuidado |
| [TinyMCE](https://www.tiny.cloud/) | GPL 2+ ou comercial | Grande difusão e documentação |
| [Froala](https://froala.com/) | Comercial | Interface muito cuidada, rápida |
| [Quill](https://quilljs.com/) | BSD | Leve, ótimo para apps modernas |
| [Tiptap](https://tiptap.dev/) | MIT (módulos Pro pagos) | Baseado em ProseMirror, muito flexível |
| [Lexical](https://lexical.dev/) | MIT | Da Meta, pensado para React |
| Editor.js | Apache 2.0 | Produz blocos em JSON, não HTML |
| [Jodit](https://xdsoft.net/jodit/) | MIT (versão Pro paga) | Sem dependências externas |
| [Trix](https://trix-editor.org/) | MIT | Simples, integrado com Ruby on Rails |
| [Summernote](https://summernote.org/) | 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.
### 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.
### 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](/pt/melhores-extensoes-para-vs-code/) 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.
**Trix** nasceu no mundo Ruby on Rails, é deliberadamente minimalista e produz markup muito limpo.
**Summernote** apoia-se em [jQuery e Bootstrap](/pt/bootstrap-ou-material-design-qual-framework/) 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.
> **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](/pt/melhores-browsers-privacidade-velocidade-consumo/) 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](/pt/alternativas-microsoft-office-gratuitas-pagas/) cheio de estilos e observa o HTML que sai. É o teste que separa as bibliotecas maduras das outras.
## 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 ``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.