no mundo Codificação e programação Existem dois tipos de editores de código - Editor Simples Baseado em texto e WYSIWYG (Abreviação de wizzy-wig ou o que você vê é o que você obtém). Em nosso artigo anterior, discutimos alguns dos Os melhores aplicativos de edição de HTML de código aberto Você digita o código manualmente. Embora não haja problemas com editores de texto HTML, eles são da velha escola. Aí vem o Editor de Fotos WYSIWYG. Tornou-se extremamente popular nos últimos anos. Ao contrário Programação HTML Coisas reais e outras coisas técnicas Para criar seu próprio site Aplicativos de edição de HTML WYSIWYG fornecem opções visuais Para criar um site Nenhum conhecimento de programação (lembre-se Anúncio Wix Essa coisa incrível)
WYSIWYG HTML Editor tem várias vantagens sobre Aplicativos de edição baseada em texto. Para começar, você pode criar um site com Editores WYSIWYG Mesmo que você não saiba programar. Tudo o que você precisa fazer é arrastar e soltar os elementos no editor e, quando terminar, basta copiar o código. No entanto, encontrar um bom editor de HTML WYSIWYG não é fácil, especialmente se você precisa que ele seja de código aberto e gratuito. Portanto, neste artigo, reunimos os melhores aplicativos de edição de HTML WYSIWYG de código aberto que podemos encontrar. vamos começar. devemos?
Os melhores aplicativos de edição de HTML WYSIWYG de código aberto
1. Pele
Pell é talvez o menor e mais simples editor WYSIWYG que você encontrará. Tem literalmente 1.38 KB de tamanho!
Ele fornece todas as funções básicas e formatação como títulos, cores, negrito, itálico, menus, citações, links e também imagens. Outras ações disponíveis incluem recuo, sobrescritos, contornos e nome e tamanho da fonte. Depois de terminar de escrever e formatar com o editor, Pell extrai todo o código HTML, que você pode simplesmente copiar e colar em seu site ou página e é melhor ir embora.
Positivos:
- Aplicativo WYSIWYG menor e mais leve
- Sem dependências
- Personalize facilmente
Negativos:
- Sem edição de HTML
- Imagens apenas por meio de links
Veredito:
Ao olhar para seu tamanho, Pell torna o pacote atraente. Mas vamos ser honestos, você só pode implementar arquivos HTML básicos com edição limitada e opções de edição. Portanto, se você está procurando por um editor WYSIWYG rápido e leve para um trabalho muito básico, deve dar uma olhada em Pell.
tentar Pell aqui
2. Abra WYSIWYG
OpenWYSIWYG é um editor de rich text multi-navegação, totalmente criptografado em JavaScript. Copiando apenas algumas linhas de código, você pode converter qualquer Para um editor WYSIWYG poderoso para OpenWYSIWYG.
A interface do usuário e os menus suspensos de opções de edição são semelhantes aos de qualquer editor de texto e você se sentirá em casa. Além de todas as opções básicas de formatação, o programa apresenta um seletor de cores aprimorado com 216 cores da web para escolher e uma ferramenta de formatação de tabela poderosa com todas as opções que você possa imaginar.
Outra grande vantagem do OpenWYSIWYG é que, com todas as opções visuais, você ainda pode visualizar o código HTML bruto e fazer modificações no código.
Positivos:
- Ambiente de edição forte
- A interface do usuário é intuitiva e fácil
- Seletor de cores extenso e opções de edição de tabela
Negativos:
- Não é atualizado há alguns anos
Veredito:
Depois de escrito em JavaScript, o OpenWYSIWYG deve funcionar com qualquer outra linguagem de programação da web e, se você estiver procurando por algo um pouco mais poderoso do que Pell para incluir em seu aplicativo da web, essa é uma ótima opção.
AbrirWYSIWYG A demonstração está disponível aqui
3. TinyMCE (Community Edition)
O próximo editor em nossa lista é o TinyMCE, o editor WYSIWYG completo para a web. Ele também é escrito inteiramente em JavaScript e fornece uma interface de usuário e experiência como a maioria dos processadores de texto.
Vem TinyMCE tem um monte de opções , A edição da comunidade é a versão gratuita e de código aberto. Ele vem com todas as opções básicas de edição, como formatação de texto, listas e tabelas, bem como algumas opções de edição de imagem.
Os desenvolvedores mantiveram os preços dos modelos premium de acordo com a quantidade de usuários que você tem, ou seja, quanto mais usuários você tiver, mais terá que pagar. Alguns dos recursos premium incluem upload e gerenciamento de todos os seus arquivos do Google Drive ou Microsoft Azure em vez de seu próprio servidor, suporte a plug-ins, verificador ortográfico, verificador de link, bem como suporte técnico premium.
Positivos:
- Suporte a plugins
- Gerenciamento de arquivos
- Suporte técnico
- Editor de código de estilo IDE para HTML
Negativos:
- O preço
- Não é totalmente open source
Veredito:
TinyMCE com uma opção de integração fácil, uma interface de usuário intuitiva e muitos recursos, incluindo suporte técnico, é um pacote completo. Se você deseja apenas usar o editor de HTML de código aberto WYSIWYG mais rico em recursos e não tem problema gastar algum dinheiro, o TinyMCE é o caminho a seguir. Além disso, eles oferecem um período de teste gratuito de um mês para seu modelo Pro que você sempre pode conferir!
tentar Demonstração TinyMCE aqui
4. Judit
Jodit é um editor WYSIWYG rápido e leve que você pode incluir em seu código e começar a editar sua página. É muito leve, com cerca de 100 KB de tamanho e é totalmente escrito em TypeScript, portanto, você não precisa de nenhuma dependência ou biblioteca para executá-lo.
Jodit é um dos editores WYSIWYG mais fáceis de usar, com opções como copiar, colar e soltar uma imagem. Você também pode anexar ou incorporar vídeos do YouTube ou Vimeo via link.
A melhor coisa que gostei no Jodit é que ele vem com um editor ACE pronto para usar e, com um botão, você pode alternar entre o ícone real e o modo de visualização. Você pode fazer modificações diretamente no código ou apenas copiá-lo e colá-lo em seu site.
Positivos:
- Leve, sem bibliotecas
- Arrastar e soltar
- Editor ACE pronto para uso
- Opção de suporte técnico (pago)
Veredito:
Jodit oferece o melhor dos dois mundos - edição WYSIWYG visual fácil, bem como ajuste de código bruto. Se você for alguém com pelo menos algum conhecimento de HTML, Jodit pode ser a melhor escolha para você.
tentar Judit
5. Nota de verão
Summernote é um editor WYSIWYG muito simples construído em jQuery e baseado em Bootstrap. Uma vez que suporta Bootstrap, você pode usar todos os estilos e temas suportados em seu editor do Bootswatch.
O editor em si tem uma interface de usuário muito limpa com o mínimo e você pode até mesmo editar ou adicionar opções de formatação de acordo com suas necessidades. Com o modo de ar do Summernote, você pode até ocultar a barra de ferramentas inteira e editar seu documento em uma velocidade vertiginosa. Junto com todas as opções básicas de formatação, arrastar e soltar, copiar / colar imagens, ele converte automaticamente todas as imagens em base64, para que você não precise aplicar manipulação de imagem em tudo.
Para mim, a melhor coisa sobre Summernote é a equipe diligente de desenvolvedores por trás deles que estão sempre ouvindo a comunidade e adicionando novas mudanças como suporte a plugins, a versão Lite ou Vanilla do Summernote não requer Bootstrap.
Positivos:
- Curva de aprendizado mínimo
- Modo aéreo para edição rápida
- Suporta Bootstrap 3.xx a 4.xx
- Ver e editar em HTML
Negativos:
- Não há suporte para plugins
- Requer Bootstrap
Veredito:
Summernote é possivelmente o editor WYSIWYG mais rico em recursos, mas gratuito no mercado e está em constante aprimoramento. Se você trabalha com Bootstrap, Summernote não o faz pensar, mas mesmo que Summernote não seja, vale a pena desenhar.
tentar Demonstração do Summernote
6. Froala
E por último, mas não menos importante, um editor froala , Beautiful WYSIWYG escrito em JavaScript. Froala é uma das ferramentas mais populares nesta lista e sua popularidade entre os desenvolvedores foi calculada por sua fácil integração e design limpo.
Froala é um editor muito poderoso por si só e inúmeros plug-ins surgiram a partir dele. Existem mais de 30 plug-ins que incluem um editor de fotos de última geração, emoticons e verificador ortográfico, e é fácil criar seu próprio plug-in. Todas as ferramentas também podem ser acessadas simultaneamente com um editor embutido que é muito conveniente.
Como TinyMCE, ele vem Froala também tem muitos sabores , Mas mesmo a versão gratuita tem todos os recursos. A única diferença é que você não obterá o código-fonte completo e suporte técnico.
Positivos:
- Editor leve e poderoso
- Edição inline
- Um grande número de adições
Negativos:
- Não é um aplicativo tão grande para telefone / site
Veredito:
Froala é rápido e leve, com uma interface de usuário agradável, mas até agora consegue oferecer todos os recursos que alguém pode procurar em um editor de HTML WYSIWYG. Se você está bem sem código-fonte e suporte, a versão gratuita irá atendê-lo bem, caso contrário, você sabe o que fazer; Não fica melhor do que isso.
Demo: Experimente froala aqui
7. Editor CK
O CKEditor é muito popular entre os usuários por ser um editor de HTML WYSIWYG de código aberto lindamente projetado. Ele vem com mais de 21 questionários para ajudá-lo a aprender HTML em um design fácil de usar. Há documentação detalhada para ajudá-lo a aprimorar ainda mais suas habilidades. Alguns dos maiores nomes da indústria de tecnologia confiam nele.
Observe que você terá que preservar os avisos de direitos autorais em cada arquivo sem excluir o arquivo LICENSE.md localizado na pasta de instalação do CKEditor. Isso não é uma vergonha, especialmente quando você recebe muito valor em troca.
Há suporte para extensões, @ menções, emojis, navegadores antigos e até mesmo autocompletar, o que pode economizar muito tempo.
Positivos:
- Documentação detalhada, testes e perguntas
- Cooperação
- autocompletar
Negativos:
- Mantenha o arquivo de licença
Obtendo CKEditor
Nota especial:
1. Editor Médio É um clone de código aberto do editor WYSIWYG incluído para Medium.com. É simples e leve e não possui dependências. Embora não seja tão poderoso, ele pode funcionar como uma ótima ferramenta de edição em linha para documentos relacionados a texto.
2. Deixe você embalar Antevisão HTML O Atom adicionou um painel de visualização no qual você pode visualizar diretamente o código HTML, o que pode ser muito útil para os desenvolvedores. Embora não seja destinado a iniciantes, é um ótimo pacote para adicionar ao seu fluxo de trabalho existente, se você já estiver envolvido na programação HTML.
O melhor editor de HTML WYSIWYG de código aberto
Enquanto isso HTML Ainda assim, é a maneira mais poderosa Para construir um site E a coisa mais complicada possível, porém, os editores WYSIWYG têm um lugar próprio. Aprender a codificar exige muito tempo e esforço e pode não fazer sentido para todos. Se você tem Experiência anterior de programação E você não tem tempo para aprender, você pode se safar totalmente usando o editor HTML WYSIWYG de código aberto.
Portanto, este foi um dos melhores aplicativos de edição de HTML WYSIWYG de código aberto que você pode usar hoje. Qual você escolhe ou qual você realmente usa? Deixe-nos saber na seção de comentários abaixo.
