{"id":27738,"date":"2021-05-23T15:31:00","date_gmt":"2021-05-23T12:31:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27738"},"modified":"2021-10-18T04:09:59","modified_gmt":"2021-10-18T01:09:59","slug":"os-3-principais-editores-de-rich-text-gratuitos-para-aplicativos-da-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/os-3-principais-editores-de-rich-text-gratuitos-para-aplicativos-da-web\/","title":{"rendered":"Os 3 principais editores de rich text gratuitos para aplicativos da Web"},"content":{"rendered":"

Voc\u00ea est\u00e1 procurando um editor de rich text gratuito para seu aplicativo da web? Um editor WYSIWYG (o que voc\u00ea v\u00ea \u00e9 o que voc\u00ea obt\u00e9m) permite inserir conte\u00fado descritivo junto com elementos HTML. Neste artigo, discutimos os 3 principais editores de rich text gratuitos que s\u00e3o populares e f\u00e1ceis de instalar.<\/p>\n

Existem v\u00e1rios editores WYSIWYG dispon\u00edveis na Internet. Eu experimentei alguns dos editores e peguei os tr\u00eas melhores editores HTML WYSIWYG gratuitos: CKEditor, TinyMCE e Trix<\/strong>.<\/p>\n

Por que precisa do Editor de Rich Text?<\/h3>\n

Pode-se perguntar por que usar o editor de rich text? A resposta \u00e9 simples. Na \u00e1rea de texto, n\u00e3o \u00e9 f\u00e1cil e amig\u00e1vel inserir grandes partes de conte\u00fado. \u00c9 muito dif\u00edcil inserir diferentes tipos de elementos HTML na textarea. Encapsular o conte\u00fado dentro dos elementos e manter sua hierarquia \u00e9 dif\u00edcil em textarea.<\/p>\n

Para simplificar esse problema, temos a op\u00e7\u00e3o de usar um editor de rich text. Esses editores WYSIWYG fornecem uma boa interface de usu\u00e1rio e uma experi\u00eancia de usu\u00e1rio no lugar de textarea.<\/p>\n

CKEditor – Editor de Texto da Web<\/h3>\n

CKEditor<\/a> \u00e9 um editor de rich text gratuito popular e comumente usado. Este editor foi projetado para simplificar a cria\u00e7\u00e3o de conte\u00fado de um site.<\/p>\n

Para usar o CKEditor, primeiro voc\u00ea precisa incluir seu arquivo JS. Eles forneceram 3 tipos de pacotes – B\u00e1sico, Padr\u00e3o, Completo. Voc\u00ea pode escolher qualquer um dos pacotes com base no requisito. Arquivo JS diferente est\u00e1 dispon\u00edvel para cada pacote.<\/p>\n

Aqui est\u00e1 o link para os pacotes CKEditor <\/a>http:\/\/ckeditor.com\/download<\/a><\/p>\n

Na p\u00e1gina acima, pode-se escolher qualquer pacote e obter um caminho de origem JS de um pacote.<\/p>\n

\"Os<\/a><\/p>\n

Por exemplo, eu uso o pacote padr\u00e3o, ent\u00e3o meu c\u00f3digo ser\u00e1 o seguinte.<\/p>\n

<!DOCTYPE html>\n<html>\n\u00a0\u00a0\u00a0\u00a0<head>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<title>CKEditor<\/title>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script src=\"\/\/cdn.ckeditor.com\/4.14.1\/standard\/ckeditor.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<\/head>\n\u00a0\u00a0\u00a0\u00a0<body>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<textarea name=\"editor1\"><\/textarea>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0CKEDITOR.replace( 'editor1' );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/script>\n\u00a0\u00a0\u00a0\u00a0<\/body>\n<\/html><\/code><\/pre>\n
O c\u00f3digo acima ir\u00e1 gerar um editor que se parece com a imagem abaixo.<\/p>\n
\"Os<\/a><\/p>\n
TinyMCE – Editor WYSIWYG avan\u00e7ado<\/h3>\n
TinyMCE<\/a> \u00e9 um dos editores de c\u00f3digo aberto mais usados. Marcas bem conhecidas est\u00e3o usando este editor em seu desenvolvimento principal.<\/p>\n
A instala\u00e7\u00e3o do editor TinyMCE \u00e9 super f\u00e1cil. O c\u00f3digo a seguir substitui textarea pelo editor TinyMCE WYSIWYG.<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n\u00a0\u00a0<script src=\"https:\/\/cdn.tiny.cloud\/1\/no-api-key\/tinymce\/5\/tinymce.min.js\" referrerpolicy=\"origin\"><\/script>\n\u00a0\u00a0<script>tinymce.init({ selector:'textarea' });<\/script>\n<\/head>\n<body>\n\u00a0\u00a0<textarea>Next, get a free Tiny Cloud API key!<\/textarea>\n<\/body>\n<\/html><\/code><\/pre>\n
Abaixo est\u00e1 a captura de tela de um editor que \u00e9 gerado usando o c\u00f3digo acima.<\/p>\n
\"Os<\/a><\/p>\n
Este editor oferece um rico conjunto de barras de ferramentas. O usu\u00e1rio pode adicionar recursos (plugins) como emo\u00e7\u00f5es, \u00e2ncora, modo de tela cheia, imagem, impress\u00e3o, corretor ortogr\u00e1fico, tabela, contagem de palavras, etc. na barra de ferramentas de um editor. Voc\u00ea obter\u00e1 a lista completa de todos os recursos dispon\u00edveis da barra de ferramentas em sua documenta\u00e7\u00e3o<\/a>.<\/p>\n
Trix – um editor WYSIWYG de c\u00f3digo aberto<\/h3>\n
Trix<\/a> \u00e9 outro editor de rich text de c\u00f3digo aberto da Basecamp. Como este editor \u00e9 usado no Basecamp, milh\u00f5es de usu\u00e1rios j\u00e1 o utilizam. Escrevi um artigo separado sobre o editor Trix, portanto, verifique este artigo<\/a> que explica como usar o editor Trix em seus sites.<\/p>\n
Espero que voc\u00ea tenha uma compreens\u00e3o b\u00e1sica dos populares editores de rich text gratuitos. Por favor, compartilhe seus pensamentos e sugest\u00f5es em uma se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n