Os 3 principais editores de rich text gratuitos para aplicativos da Web
Você está procurando um editor de rich text gratuito para seu aplicativo da web? Um editor WYSIWYG (o que você vê é o que você obtém) permite inserir conteúdo descritivo junto com elementos HTML. Neste artigo, discutimos os 3 principais editores de rich text gratuitos que são populares e fáceis de instalar.
Existem vários editores WYSIWYG disponíveis na Internet. Eu experimentei alguns dos editores e peguei os três melhores editores HTML WYSIWYG gratuitos: CKEditor, TinyMCE e Trix.
Por que precisa do Editor de Rich Text?
Pode-se perguntar por que usar o editor de rich text? A resposta é simples. Na área de texto, não é fácil e amigável inserir grandes partes de conteúdo. É muito difícil inserir diferentes tipos de elementos HTML na textarea. Encapsular o conteúdo dentro dos elementos e manter sua hierarquia é difícil em textarea.
Para simplificar esse problema, temos a opção de usar um editor de rich text. Esses editores WYSIWYG fornecem uma boa interface de usuário e uma experiência de usuário no lugar de textarea.
CKEditor – Editor de Texto da Web
CKEditor é um editor de rich text gratuito popular e comumente usado. Este editor foi projetado para simplificar a criação de conteúdo de um site.
Para usar o CKEditor, primeiro você precisa incluir seu arquivo JS. Eles forneceram 3 tipos de pacotes – Básico, Padrão, Completo. Você pode escolher qualquer um dos pacotes com base no requisito. Arquivo JS diferente está disponível para cada pacote.
Aqui está o link para os pacotes CKEditor http://ckeditor.com/download
Na página acima, pode-se escolher qualquer pacote e obter um caminho de origem JS de um pacote.
Por exemplo, eu uso o pacote padrão, então meu código será o seguinte.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>O código acima irá gerar um editor que se parece com a imagem abaixo.
TinyMCE – Editor WYSIWYG avançado
TinyMCE é um dos editores de código aberto mais usados. Marcas bem conhecidas estão usando este editor em seu desenvolvimento principal.
A instalação do editor TinyMCE é super fácil. O código a seguir substitui textarea pelo editor TinyMCE WYSIWYG.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Next, get a free Tiny Cloud API key!</textarea>
</body>
</html>Abaixo está a captura de tela de um editor que é gerado usando o código acima.
Este editor oferece um rico conjunto de barras de ferramentas. O usuário pode adicionar recursos (plugins) como emoções, âncora, modo de tela cheia, imagem, impressão, corretor ortográfico, tabela, contagem de palavras, etc. na barra de ferramentas de um editor. Você obterá a lista completa de todos os recursos disponíveis da barra de ferramentas em sua documentação.
Trix – um editor WYSIWYG de código aberto
Trix é outro editor de rich text de código aberto da Basecamp. Como este editor é usado no Basecamp, milhões de usuários já o utilizam. Escrevi um artigo separado sobre o editor Trix, portanto, verifique este artigo que explica como usar o editor Trix em seus sites.
Espero que você tenha uma compreensão básica dos populares editores de rich text gratuitos. Por favor, compartilhe seus pensamentos e sugestões em uma seção de comentários abaixo.
Artigos relacionados
- Como instalar e usar o CKEditor no Laravel
- Como instalar e usar o TinyMCE – Editor de HTML WYSIWYG no Laravel
- Extensão FTP / SFTP para código do Visual Studio