Editores de texto em JavaScript/HTML para uso no seu site

By | 16 de julho de 2010

Editor de Texto em JavaScriptNesta postagem rápida falarei de editores de texto feitos em JavaScript de código aberto, para uso em sites, blogs, entre outros.

A maioria funciona de modos parecidos: basta você adicionar uma área de texto em HTML (<textarea></textarea>), ligar o arquivo JavaScript da biblioteca – podendo definir algumas características – e pronto.

Via Google são fáceis de encontrar, mas aqui vou aproveitar para falar a respeito de dois deles com quem já lidei: o TinyMCE e o NicEdit.

TinyMCE – provavelmente o mais popular, utilizado inclusive pelo WordPress, Joomla, entre outros. Talvez seja o que conheça melhor, não por ter usado em algum trabalho, mas por curiosidade (fucei sua documentação e experimentei criar plugin, entre outros). Gostei muito: bem completo, integrado com jQuery (permite usar código desta biblioteca sem grande conflito), fácil de usar, boa documentação, entre outros.

CKEditor – nunca usei, mas parece ser tão bom quanto o TinyMCE. A barra de ferramentas é bem completa, a interface é linda, além de já vir com versão em português. Só tenho dúvidas com relação à documentação: procurei e não encontrei. Além de tudo, ao que parece, vários recursos são pagos (?). Enfim, vale ficar de olho.

NicEdit – já usei este, na seção de comentários deste blog, até um tempo atrás. Retirei ele por “comer” as quebras de linha (as tags <br /> – o texto do comentarista ficava todo colado). Acho-o muito limitado, mas talvez seja o mais simples de se integrar. Para quem não quer lidar com muito código, talvez seja a melhor solução.

Enfim, acredito que podemos resumir assim: caso queira um editor completo e precise personalizá-lo, o TinyMCE é para você. Se você quer um editor bonitão, vá de CKEditor. Agora, se você não entende muito de Javascript nem de HTML, experimente o NicEdit.

E este é o fim da postagem. E caso queira sair, aperte o botão de “Fechar” do seu navegador! :-D

Be Sociable, Share!

16 thoughts on “Editores de texto em JavaScript/HTML para uso no seu site

  1. Pingback: Tweets that mention Editores de texto em JavaScript/HTML para uso no seu site « Francisco Prado -- Topsy.com

  2. Sèrgio Rodrigues

    Opa Francisco, mais um ótimo post seu blog, ta cada vez ficando melhor. Quanto aos editores, sempre fui adepto do TinyMCE ate por que, como você falou ele é o editor padrão do WordPress, por isso sou mais familiarizado com ele. Abraço Francisco!

    Reply
  3. goncin

    Francisco,

    O CKEditor pode ser usado com um módulo chamado CKFinder, que possibilita o upload de arquivos para posterior inserção no HTML. Este último, se você quiser usá-lo num site comercial, exige licença. No dia-a-dia, dá para conviver com as mensagens de “Unregistered” que aparecem nele.

    Parabéns pelo post! :)

    Reply
  4. Francisco

    @Sérgio – opa, valeu pelo comentário. Também passei para o TinyMCE, até porque, em caso de precisar, basta editar um tema e colocar no WP.

    @Goncin – conferi o CKFinder. Valeu pela dica (ainda atualizo o post). O TinyMCE tem um plugin para função similar. Ainda conferirei mais sobre.

    Abraços a todos os envolvidos!

    Reply
  5. danielle

    Você disse que já usou o nicedit nos comentarios do seu blog. Como faço para colocar no meu? Estou quebrando a cabeça e até agoa não consegui.
    Obrigada

    Reply
  6. Samuel

    Como é que eu faço para colocar um editor de texto para o novo site que eu criei no Dreamweaver para colocar matéria pastagem e vídeo.

    Reply
  7. Alex A. A.

    O CKEditor pode ser usado com um módulo chamado CKFinder, que possibilita o upload de arquivos para posterior inserção no HTML.

    Este último, se você quiser usá-lo num site comercial, exige licença. No dia-a-dia, dá para conviver com as mensagens de “Unregistered” que aparecem nele.

    Parabéns pelo post! :-)

    :)

    Reply
  8. kethellen

    Olá Francisco eu andei pesquisando sobre esse TinyMCE inclusive vi um exemplo neste link http://www.criarweb.com/artigos/exemplos/tinymce.php porém não tem o que eu mais quero que é mudar o tipo da fonte e a opção da cor da fonte que também não tem.

    Será que tem alguma configuração para aparecer na tela de edição essas opções ou realmente não tem, teria como você que entende bem sobre esse script me explicar?

    Desde já agradeço…

    Reply
  9. Tulio

    Olá amigos(a), não consegui instalar este TinyMCE.

    Alguma dica de como instalar?

    Desde já, obrigado por sua atenção!

    Tulio…

    Reply
    1. Francisco

      Adicione o arquivo Javascript do TinyMCE ao seu arquivo HTML (entre < head >< /head >) e ele só funciona em arquivos HTML que tenha um elemento textarea. abs

  10. Sonia

    Olá gente!

    Apenas um comentário sobre o Tinymce: quando se usa o formato completo dele a função de upload de imagens fica desabilitada,porque ele necessita de plugins como o MCImageManager e o MCFileManager que são pagos. Apanhei muito por não prestar atenção nas entrelinhas :P
    Se não precisar de nenhum upload de imagens e usar apenas a função de texto, o Tinymce é bem adequado. Quer quer usar ele “full” vi ter que desembolsar – no meu caso, uso o CKeditor que para as funções que preciso é 100% free.

    Reply
  11. Eric Farias

    Cara muito obrigado era o que estava faltando pra min completar meu projeto agora é só aplicar.

    Reply
  12. adam

    galera boa noite!

    eu estou usando este editor nicEdit ele é otimo e atende as minhas necessidades! porem quando estou digitando um texto a barra de rolagem nao exibe! eu fui no javaScript e coloquei auto em todos os overFlow para garantir que mostrasse mais nao exibe! ele simplesmente começa a aumentar de autura quando passa do tamanho definido que é de height:150px;
    como poderia solucionar este problema? agradeço!

    Reply
  13. Nego

    Utilizei o NicEdit sem problemas é realmente bem simplista e tem um bom visual.
    Boa dica cara e parabéns pela pagina.

    Reply

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *


− 6 = 3