Vamos apresentar uma ferramenta gratuita que serve para criar elementos de formulário, parecidos aos <textarea>, porém com a particularidade de que permitem introduzir texto com estilos, como em negrito, sublinhado, diferentes tipos de fontes e inclusive, tabelas ou imagens. Em suma, provê das funções típicas dos editores HTML WYSIWYG (what you see is what you get), mas dentro de um campo de formulário de uma página web.
htmlArea se inclui na página com umas poucas linhas Javascript fáceis de escrever. Com isso, obtemos um editor que permite funcionalidades como:
- Formatar texto em negrito, cursivas e sublinhados
- Mudar a tipografia e a cor
- Alinhar os diferentes parágrafos
- Incluir listas, linhas horizontais, links, images...
Como o programa está realizado em Javascript e trabalha unicamente do lado do cliente, poderemos utilizá-lo em qualquer tipo de servidor (não requer programação ASP ou PHP). A desvantagem é que funciona unicamente em versões de Internet Explorer 5.5 ou superiores. Pelo menos, em outros navegadores, não dará erros, e sim, que simplesmente veremos um campo <textarea> normal.
Como se insere o htmlArea
Vamos ver como se inclui este tipo de editor em uma página web. Como primeiro passo, baixamos o software que poderemos encontrar na página de início de
htmlArea. O arquivo é muito pequeno. Vem em .zip, por isso, devemos descomprimí-lo em nosso computador.
Uma vez descomprimido, encontramos exemplos e instruções para seu funcionamento. Executando o arquivo chamado example.html podemos fazer uma pequena prova, para ver se nosso navegador suporta htmlArea. Se tudo estiver correto, podemos fazer nossa primeira prova.
Vamos criar um arquivo HTML, para fazer nosso primeiro exemplo, no mesmo diretório onde descomprimimos o software. Editamos e colocamos no cabeçalho o seguinte código:
<script language="Javascript1.2">
<!--
// Carregamento do htmlarea
_editor_url = "" // URL do arquivo htmlarea
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
document.write(' language="Javascript1.2"></scr' + 'ipt>');
} else { document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }
// -->
</script>
O único que há que editar neste código é a variável "_editor_url", à que temos que atribuir a rota onde se encontram os arquivos de htmlArea. Como neste caso o arquivo de exemplo está no mesmo diretório que htmlArea, atribuímos um string vazio à variável:
_editor_url = "" // URL do arquivo htmlarea
Continuamos colocando um formulário com um campo textarea dentro.
<form>
<textarea name="campo1" style="
