Inércia Sensorial

2006-08-09

Incluindo o Dojo Editor no seu formulário

Filed under: Javascript — inerte @ 12:02

Tenho usado bastante o Dojo Toolkit nos sites que tenho feito, e hoje surgiu a necessidade de adicionar um editor de HTML amigável em um de nossos formulários.

Felizmente, o Dojo vem com um editor desses. É simplesmente facílimo de usá-lo, basta adicionar o dojo.js, chamar o widget de Editor, e colocar em um textarea. O editor é do famoso tipo WYSIWYG (What You See Is What You Get, ou O Quê Você Vê É O Que Aparece), e permite aos usuários manipularem HTML sem se preocupar com a formatação, pois o texto vai mudando e aparecendo conforme eles vão digitando e aplicando os estilos, links, cabeçalhos, etc…

Primeiro, no header do documento HTML vão essas tags:

1
2
3
4
5
<script type="text/javascript"
src="/dojo/dojo.js"></script>
<script type="text/javascript">
  dojo.require("dojo.widget.Editor");
</script>

Depois, substitua o seu textarea por esse:

1
<textarea dojoType="Editor"></textarea>

Apesar de vermos o editor, temos dois problemas:

  1. O textarea ao ser enviado, não tem nome, e não podemos processá-lo;
  2. A caixa para digitar o texto é muito pequena;

Mas nada está perdido, pois vamos resolvê-los. O nome do campo é colocando com o atributo name mesmo, comum à textareas. Já o tamanho pode ser controlado pelo atributo minHeight do editor do Dojo, ficando assim:

1
<textarea dojoType="Editor" name="conteudo" minHeight="15em"></textarea>

Existem outras opções para colocar no Editor, principalmente o atributo items, que muda os botões disponíveis para edição do texto. Para conhecê-los, confira os exemplos no site do Dojo.

3 Comments »

  1. Olá,
    tem como eu além de manipular a altura minHeight, manipular a largura do dojoType Editor??

    Comment by Marcos Abadi — 2006-11-22 @ 10:11

  2. Fala amigo… muito legal essa ferramenta!!! 😉

    só tenho uma dúvida, eu consigo via JavaScript pegar o valor do textArea, exemplo

    var conteudo = document.form1.conteudo.value;
    ???

    abração

    Comment by Rodrigo Morais — 2007-04-02 @ 16:03

  3. Oi Rodrigo,

    A maneira que eu uso para recuperar valores de campos é usar:

    var valor = document.getElementById(‘id_do_elemento’).value;

    Comment by inerte — 2007-04-02 @ 17:53

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress