Minha Jornada na Busca pelo Editor HTML Perfeito – E Como Acabei Criando o Meu Próprio!
Há algum tempo, me deparei com a necessidade de implementar um editor HTML no meu Kit de Ferramentas. Como muitos desenvolvedores, comecei a buscar opções de código aberto, e logo me lembrei do confiável CKEditor. Para minha surpresa, descobri que o CKEditor, que por tanto tempo foi uma iniciativa open source sob a licença GPL 2.0, evoluiu para um modelo comercial. E, sinceramente, não há nada de errado nisso – os desenvolvedores merecem ser recompensados financeiramente pelo seu trabalho. A boa notícia é que a versão 4 do CKEditor ainda pode ser utilizada sob os termos da licença GPL 2.0, o que é ótimo para quem procura uma solução gratuita.
No entanto, ao tentar integrar o CKEditor, percebi que o processo de gerar uma API era um pouco mais burocrático do que eu gostaria. Eu queria algo mais simples e didático, que se encaixasse perfeitamente nas minhas necessidades. Foi então que tive uma ideia ousada: criar meu próprio editor HTML do zero, usando nada mais, nada menos que o ChatGPT!
É claro que essa empreitada não foi fácil. O ChatGPT, embora seja uma ferramenta poderosa, ainda tem suas limitações quando se trata de lidar com projetos mais complexos. Isso me obrigou a fazer muito do trabalho manualmente, ajustando e aperfeiçoando o código a cada passo. No final, o esforço valeu a pena… ou pelo menos é nisso que eu quero acreditar.
Mas hoje, não estou aqui para falar sobre o meu editor HTML.
Depois de concluir minha versão, cheguei à conclusão de que um trabalho relativamente rápido no ChatGPT não pode substituir o trabalho meticuloso feito por um profissional qualificado ou por uma equipe especializada. Por isso, decidi traduzir um post do GitHub que lista editores HTML, testá-los e criar uma lista baseada nos que achei melhores, explicando os critérios que utilizei para essa seleção.
Bom, para começar aqui temos a versão traduzida da pagina do github do usuário Jeferson Mari
caso queira visitar a página original no github é só clicar aqui
Eu acredito que a lista do usuário está muito bem feita e não precisa de muitos comentários. No entanto, gostaria de destacar o editor HTML que, na minha opinião, é o melhor e atendeu a todas as minhas expectativas: o SUNEDITOR 🎉. (Infelizmente, o site está com protocolo inseguro, mas funciona.)
Esse editor é simples e conta com uma interface completa que permite adicionar praticamente qualquer coisa no HTML, como tabelas, vídeos e sons. Cada parte é muito bem pensada nas funcionalidades. Se me permitem a observação, o design poderia ser um pouco mais organizado do ponto de vista do usuário comum. No entanto, o código é tão bem estruturado que permite ajustar a ordem e a quantidade de funcionalidades, a licença envolvida no projeto é a MIT License, que nos termos do desenvolvedor JiHong88 permite que você use normalmente contanto que você mantenha os creditos originais dentro do código, é uma licença modesta e flexivel ao meu ver, e que atende praticamente a todos.
Para escolher o editor ideal para você, você deve considerar testar alguns editores da lista, avaliar se a licença é compativel com o seu projeto, e só ai então começar a implementar, boa sorte!
Sempre volto para dar feedbacks positivos sobre outros editores que testo.
Um abraço e, logo abaixo, vocês encontrarão a lista traduzida:
Uma seleção de editores WYSIWYG incríveis
Uma lista com curadoria de editores WYSIWYG incríveis.
Português
Conteúdo
Autônomo
Editores WYSIWYG que podem ser usados sem dependência de outras bibliotecas ou frameworks.
- Adiptal Editor – Gratuito e atualizável para $ Não-Livre – Adiptal Editor é um editor WYSIWYG baseado em iframe construído em JavaScript. Com recursos avançados e elementos personalizados, ele fornece uma saída limpa para projetar páginas responsivas.
- Aloha Editor – Aloha Editor é uma biblioteca de edição de conteúdo JavaScript.
- CKEditor 4 – Editor de HTML WYSIWYG testado em batalha.
- CKEditor 5 – Um conjunto de editores de rich text prontos para usar criados com uma estrutura poderosa.
- Ferramentas de conteúdo – Uma biblioteca JS para criar editores WYSIWYG para conteúdo HTML. 😴
- Editor.js – Um editor de estilo de bloco com saída JSON limpa.
- Etherpad – Etherpad: Edição de documentos colaborativa em tempo real.
- Froala Editor $ Non-Free ⊘ Proprietário – Um editor de texto rico WYSIWYG lindamente projetado baseado em HTML5.
- grande.js – É um meio na Starbucks. Anel mindinho. 😴
- Jodit – Editor WYSIWYG HTML rico e FileBrowser.
- Editor Médio – Medium.com clone do editor WYSIWYG. Usa a API contenteditable para implementar uma solução de rich text. 😴
- Medium.js – Uma pequena biblioteca JavaScript para tornar o conteúdo editável bonito (como o editor do Medium). 😴
- Milkdown – Estrutura do editor de markdown WYSIWYG orientada por plug-ins.
- Mobiledoc Kit – Um kit de ferramentas para construir editores WYSIWYG com o Mobiledoc. 😴
- Pell – O editor de texto WYSIWYG mais simples e menor (1kB) para web, sem dependências. 😴
- Editor de caneta – Aproveite a edição ao vivo (+markdown). 😴
- Quill – Um editor de rich text moderno criado para compatibilidade e extensibilidade.
- SCEditor – Um editor leve de WYSIWYG BBCode e XHTML.
- Scribe – Deprecated Uma estrutura de editor de rich text para a plataforma web, com patches para inconsistências do navegador e padrões sensatos. 😴
- Squire – Um editor de rich text HTML5, que fornece uma poderosa normalização entre navegadores, ao mesmo tempo em que é extremamente leve e flexível.
- Substância – Uma biblioteca JavaScript para edição de conteúdo baseado na Web. 😴
- SunEditor – Editor html WYSIWYG baseado em javascript puro, sem dependências.
- TinyMCE – Uma biblioteca JavaScript para edição de texto ‘WYSIWYG’ ou rich text independente de plataforma.
- tiptap – A estrutura do editor headless para artesãos da web.
- Trix – Um editor de rich text para a escrita diária.
- Tui Editor – Editor Markdown WYSIWYG. Padrão GFM + Gráfico & UML Extensível. 😪
- UEditor – UEditor é um editor web rico em WYSIWYG desenvolvido pela equipe Baidu fex. É leve, personalizável e orientado para o usuário. 😴
- wangEditor – Um editor de rich text leve, API amigável e uso extremamente conveniente. 😴
- web-component-designer – Um designer WYSIWYG para webcomponents como um webcomponent. Demonstração ao vivo: aqui
- wysihtml – Editor de rich text de código aberto para a web moderna. 😴
- no CodeMerge – Um editor de rich text modular e de código aberto.
Baseado em jQuery
Editores necessários para jQuery
- bootstrap-wysiwyg – Pequeno editor de rich text WYSIWYG compatível com bootstrap. 😴
- Dante Editor – Apenas mais um clone do editor wysiwyg médio.
- Easyeditor – Editor html de rich text muito leve e altamente configurável. 😴
- jQuery-Notebook – Um editor de rich text WYSIWYG moderno, simples e elegante. 😴
- popline – Uma barra de ferramentas do editor de rich text HTML5. 😴
- simditor – Um editor WYSIWYG fácil e rápido. 😴
- Summernote – Editor WYSIWYG super simples.
- Editor de interface do usuário do sistema – Editor WYSIWYG de Markdown – Produtivo e extensível. 😪
- Trumbowyg – Um editor JavaScript WYSIWYG leve e incrível – apenas 20kB (8kB gzip).
Para angular
Editores para seu projeto baseado em Angular.
- angular-froala-wysiwyg $ Non-Free – Ligações Angular 4 a Angular 9 para Froala WYSIWYG Editor.
- ckeditor4-angular – Um componente oficial do editor de rich text do CKEditor 4 para Angular 2+.
- ckeditor5-angular – Um componente oficial do editor de rich text do CKEditor 5 para Angular 2+.
- ngx-summernote – Editor wysiwyg do Summernote para Angular.
- jodit-angular – Wrapper angular em torno de Jodit para facilitar o uso em um Angular.
- ngx-quill – Um componente Angular (>=2) para o Quill Rich Text Editor.
- textAngular – Um editor de texto / editor Wysiwyg radicalmente poderoso para Angular.js. 😴
- tinymce-angular – wrapper Angular oficial para TinyMCE.
- ngx-peruca– Editor de Rich Text HTML Angular WYSIWYG (Inspirado em Angular.jsngWig)
- ngx-editor – Editor de Rich Text para Angular usando ProseMirror)
Para React
Editores para seu projeto baseado em React.
- Alloy Editor – Editor WYSIWYG baseado em CKEditor com interface do usuário completamente reescrita.
- bangle.dev – Coleção de nível superior de componentes ProseMirror para criar editores de rich text.
- BlockNote – Editor baseado em blocos baseado em ProseMirror e TipTap, destinado a ser mais fácil de configurar e aprender.
- ckeditor4-react – Um componente oficial do editor de rich text do CKEditor 4 para React.
- ckeditor5-react – Um componente oficial do editor de rich text do CKEditor 5 para React.
- Dante II – Uma reescrita completa do editor dante em draft-js. 😴
- Draft.js – Uma estrutura de editor de rich text JavaScript, criada para React e apoiada por um modelo imutável. 😴
- jodit-react – Componente React para Jodit Editor.
- lexical– Uma estrutura de editor de texto extensível, sucessora do Draft.js pela Meta.
- megadraft – Megadraft é um editor de Rich Text construído em cima do Draft.JS do Facebook, apresentando uma boa base padrão de componentes e extensibilidade
- Plasmic – Um construtor visual WYSIWYG que permite arrastar e soltar componentes do React.
- Plate – O editor de rich text para React.
- React Draft Wysiwyg – Um editor Wysiwyg construído em cima do React e DraftJS.
- react-froala-wysiwyg $ Non-Free – Componente React para Froala WYSIWYG HTML Rich Text Editor.
- react-mobiledoc-editor – Um editor de Mobiledoc escrito com React e Mobiledoc-Kit. 😴
- react-quill – Um componente Quill para React. 😴
- react-rte – Editor de rich text “WYSISYG” Pure React baseado em draft-js. 😴
- react-summernote – Summernote (editor WYSIWYG super simples) adaptação para React. 😴
- react-trix – Wrapper React para o editor Trix do Basecamp.
- Slate JS – Uma estrutura totalmente personalizável.
- suneditor-react – Componente Pure React para SunEditor (editor html WYSIWYG baseado em javascript puro, sem dependências).
- tinymce-react – wrapper oficial do React para TinyMCE.
Para Vue
Editores para o seu projeto baseado em Vue.
- umo-editor – Umo Editor é um editor de documentos de código aberto, baseado no Vue3.
- ckeditor4-vue – Um componente oficial do editor de rich text CKEditor 4 para Vue.
- ckeditor5-vue – Um componente oficial do editor de rich text do CKEditor 5 para o Vue.
- vue-froala-wysiwyg $ Non-Free – Componente Vue para Froala WYSIWYG HTML Rich Text Editor.
- vue-html5-editor – Um editor wysiwyg html5 para Vue. 😴
- vue-mobiledoc-editor – Um kit de ferramentas de componentes do editor mobiledoc para Vue. 😴
- vue-wysiwyg – Um editor WYSIWYG leve para Vue. 😴
- vue-ckeditor5 – CKEditor 5 para Vue. 😴
- Vue2Editor – Um editor de texto usando Vue e Quill. 😴
- tinymce-vue – wrapper oficial do TinyMCE para Vue.
- vue-trix – Componente editor Trix simples e leve para Vue.
- Everright-formEditor – Um editor de formulário visual de baixo código baseado em vue3. Ele pode criar formulários com operações simples por meio da interface GUI. Tem uma interação flexível. O PC depende do element-plus, enquanto o celular depende do vant. Há um conjunto de adaptadores para converter parâmetros em parâmetros que podem ser reconhecidos por element-plus e vant.
Para Ruby
Editores para seu projeto baseado em Ruby.
- bootstrap-wysihtml5-rails – Editor WYSIWYG para Bootstrap, integrado no pipeline de ativos Ruby on Rails. 😴
- bootsy – Um belo editor wysiwyg com upload de imagens para Rails. 😴
- ckeditor – Jóia de integração do Ckeditor para rails. 😴
- Mercury Editor – Mercury Editor: O editor Rails HTML5 WYSIWYG. 😴
- wysiwyg-rails $ Non-Free – Rubi gem para Froala jQuery WYSIWYG HTML Rich Text Editor.
WYSIWYG-parecido
Editores semelhantes a WYSIWYG
- EmojiOne Area – Plug-in EmojiOne Converter / Picker semelhante a WYSIWYG para jQuery. 😴
- GrapesJS – Um Web Builder Framework de código aberto e multifuncional.
- last-draft – Um editor Draft.js usando draft-js-plugins. 😴
- Editor Ory – Editor de conteúdo altamente personalizável de última geração para o navegador – baseado em React e Redux. WYSIWYG com esteróides. 😴
- prosemirror – O editor ProseMirror WYSIWYM.
- rich-textarea – Um componente textarea para o React colorir, destacar, decorar textos e oferecer preenchimento automático.
- Sir Trevor – Edição de conteúdo rico totalmente reimaginada para a web. 😴
- woofmark – Um editor modular, progressivo e bonito de Markdown e HTML. 😴
- ngx-wall – Editor extensível baseado em componentes com experiência sofisticada de arrastar e soltar. 😴
Ícones
😪 sem atualizações por 1 ano 😴 sem atualizações por 2 anos