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.