Ferramentas para criar editores de texto em seus sistemas

Postado por Leo Baiano
17 de janeiro de 2010

Em tempos de web 2.0, chegando quase na era 3.0, as empresas estão cada vez mais disponibilizando conteúdo e informações sobre seu negócio, produtos e serviços na internet, o que torna inviável a criação de sites estáticos.

Nos últimos tempos todos os projetos web que trabalho precisam de um gerenciador de conteúdo para facilitar a atualização das informações no site. Nestes casos gosto de utilizar ferramentas WysiWyg (What You See Is What You Get ou O que você vê é o que você obtem) para facilitar a edição dos textos.

FCKEditor - Editor de Texto

FCKEditor - Editor de Texto

Entre as diversas ferramentas WysiWyg disponíveis se destacam a TinyMCE e o FCKEditor, ambos excelentes ferramentas que tornam simples a implementação de editores de texto. Eu prefiro usar o FCKEditor por conta do upload de imagens e arquivos, no TinyMCE para habilitar o upload é necessário utilizar uma versão paga ou plugins.

No link das ferramentas supra citadas você encontra a documentação para instalação e configuração. Se você precisa de um editor de textos completo aconselho utilizar uma das duas ferramentas pois além de completas são altamente customizáveis, você pode remover os botões que não deseja utilizar e deixar o editor do jeito que quiser.

TinyMCE - Editor de texto

TinyMCE - Editor de texto

Se você não precisa de um editor tão completo, com upload de imagens e diversos botões que o cliente dificilmente vai usar então apresento-lhe um plugin jquery que resolve este problema.

Jwysiwyg Plugin Jquery para editor de texto

O plugin jquery Jwysiwyg acrescenta ao textarea do seu sistema gerenciador de conteúdo os botões mais utilizados (negrito, italico, marcdores, centralizar…) para edição de texto.

Jwysiwyg Plugin Jquery

Jwysiwyg Plugin Jquery

A instalação e implementação do plugin é muito simples, primeiro você precisa baixar o Jquery e o Plugin Jwysiwyg, feito isto é só chamá-los no seu código assim:

1
2
3

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<link rel="stylesheet" href="js/jwysiwyg/jquery.wysiwyg.css" type="text/css" />
<script type="text/javascript" src="js/jwysiwyg/jquery.wysiwyg.js"></script>

Feito isto você deve incluir o código abaixo no final da sua página, antes de fechar o :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<script type="text/javascript">
(function($)
{
  $('#editor').wysiwyg({
    controls: {
      strikeThrough : { visible : true },
      underline     : { visible : true },
 
      separator00 : { visible : true },
 
      justifyLeft   : { visible : true },
      justifyCenter : { visible : true },
      justifyRight  : { visible : true },
      justifyFull   : { visible : true },
 
      separator01 : { visible : true },
 
      indent  : { visible : true },
      outdent : { visible : true },
 
      separator02 : { visible : true },
 
      subscript   : { visible : true },
      superscript : { visible : true },
 
      separator03 : { visible : true },
 
      undo : { visible : true },
      redo : { visible : true },
 
      separator04 : { visible : true },
 
      insertOrderedList    : { visible : true },
      insertUnorderedList  : { visible : true },
      insertHorizontalRule : { visible : true },
 
      h4mozilla : { visible : true && $.browser.mozilla, className : 'h4', command : 'heading', arguments : ['h4'], tags : ['h4'], tooltip : "Header 4" },
      h5mozilla : { visible : true && $.browser.mozilla, className : 'h5', command : 'heading', arguments : ['h5'], tags : ['h5'], tooltip : "Header 5" },
      h6mozilla : { visible : true && $.browser.mozilla, className : 'h6', command : 'heading', arguments : ['h6'], tags : ['h6'], tooltip : "Header 6" },
 
      h4 : { visible : true && !( $.browser.mozilla ), className : 'h4', command : 'formatBlock', arguments : ['<H4>'], tags : ['h4'], tooltip : "Header 4" },
      h5 : { visible : true && !( $.browser.mozilla ), className : 'h5', command : 'formatBlock', arguments : ['<H5>'], tags : ['h5'], tooltip : "Header 5" },
      h6 : { visible : true && !( $.browser.mozilla ), className : 'h6', command : 'formatBlock', arguments : ['<H6>'], tags : ['h6'], tooltip : "Header 6" },
 
      separator07 : { visible : true },
 
      cut   : { visible : true },
      copy  : { visible : true },
      paste : { visible : true }
    }
  });
})(jQuery);
</script>

No código acima é onde você deve configurar quais botões devem aparecer. Na linha 4 você vai colocar o ID que servirá para informar em qual textarea devem aparecer os botões.

Agora criando o textarea que vai aparecer com os botões do editor de texto:

1
2
3
4
5

<h2>Editor de texto</h2>
                <p>
                    <label for="editor">Editor de Texto</label>
                    <textarea name="editor" id="editor" rows="5" cols="103"></textarea>
                </p>

Se tudo correr bem você já deve ter o editor de texto. Qualquer dúvida sobre TyneMCE, FCKEDitor ou o plugin Jwysiwyg fala ai nos comentários pra gente ver se consegue resolver.

PS. – Eu sei que na nova versão o FCKEditor é chamado de CKEditor, não sei porque tiraram o F mas eu continuo chamando de FCKEditor, vulgo FCK.

PS². – Vocês já conhecem o novo blog do Hilder Santos? Ele criou um blog voltado para desenvolvimento web e pretende abordar assuntos relacionados a WordPress, SEO, Jquery, PHP e muito mais…

O blog do Hilder é o Desenvolva Web, ainda não existem muitos posts mas pela qualidade profissional do parceiro creio que logo teremos boas dicas por lá.

Desenvolvimento WEB

Se você gostou deste post, escreva um comentário e/ou cadastre-se em nosso feed.

Comentários

Ainda não há comentários.

Escreva um Comentário

(obrigatório)

(obrigatório)