Incluindo o Dojo Editor no seu formulário

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:


Depois, substitua o seu textarea por esse:

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:

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.


Posted

in

by

Tags:

Comments

3 responses to “Incluindo o Dojo Editor no seu formulário”

  1. Marcos Abadi Avatar

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

  2. Rodrigo Morais Avatar
    Rodrigo Morais

    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

  3. inerte Avatar
    inerte

    Oi Rodrigo,

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

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.