Francisco Prado

Mais um blog sobre Web, desenvolvimento e assuntos em geral…

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

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

Postado por: Francisco em 16 de julho de 2010 às 20:15
Tags: , ,
Categorias: Dicas & Tutoriais,Padrões Web

12 Comentários »

  1. [...] This post was mentioned on Twitter by Garoto que programa, Francisco Prado. Francisco Prado said: Post novo: editores de texto em JavaScript para embutir no seu site/blog: http://bit.ly/bfBkyP [...]

    Pingback by Tweets that mention Editores de texto em JavaScript/HTML para uso no seu site « Francisco Prado -- Topsy.com — 16 de julho de 2010 às 21:54

  2. 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!

    [Responder]

    Comentário by Sèrgio Rodrigues — 17 de julho de 2010 às 9:35

  3. 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! :)

    [Responder]

    Comentário by goncin — 17 de julho de 2010 às 18:13

  4. @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!

    [Responder]

    Comentário by Francisco — 17 de julho de 2010 às 21:40

  5. 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

    [Responder]

    Comentário by danielle — 27 de abril de 2011 às 2:55

  6. Olá,

    É preciso adicionar o link certo com o nicedit. E o campo de comentários deve ser um .

    abs

    [Responder]

    Comentário by Francisco — 27 de abril de 2011 às 9:46

  7. 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.

    [Responder]

    Comentário by Samuel — 3 de junho de 2011 às 20:40

  8. aki qeria te perguntat como eu add este TinyMCE no meu site php

    [Responder]

    Comentário by railam — 18 de setembro de 2011 às 12:34

  9. 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! :-)

    :)

    [Responder]

    Comentário by Alex A. A. — 19 de setembro de 2011 às 16:32

  10. 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…

    [Responder]

    Comentário by kethellen — 25 de setembro de 2011 às 13:05

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

    Alguma dica de como instalar?

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

    Tulio…

    [Responder]

    Francisco Reply:

    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

    [Responder]

    Comentário by Tulio — 6 de dezembro de 2011 às 19:47

Feed RSS para comentários sobre este post. TrackBack URL

Deixe um comentário