Javascript: Construindo um editor de texto

Olá pessoal! Neste artigo mostrarei como construir uma ferramenta que está presente no dia-a-dia de todos que navegam na Internet, em e-mails, blogs até gerência de conteúdo em sistemas empresariais, construiremos um simples editor com as principais funcionalidades em JavaScript.

Apartir do Internet Explorer 5 foi criado um método chamado execCommand(). Esse método é usado para executar comandos em uma página, manipulando dados da página, alterando a fonte, alinhando texto, etc.

A assinatura do método e os parâmetros são:

valorRetornado = object.execCommand ( comando, flag, valor);

· valorRetornado: o método execCommand retorna um valor booleano, retorna verdadeiro se o comando executar, caso contrário, falso.

· comando: Um dos comandos predefinidos (alguns apresentados logo adiante neste artigo) que podem ser usados para alterar a página.

· flag: Um valor booleano indicando se há uma relação com o usuário.

· valor: Um valor que possa ser usado em combinação com o Comando. Por exemplo, se usasse um comando para mudar a fonte do texto, o parâmetro valor seria a nova fonte, por exemplo "verdana", então o texto seria mudado para Verdana.

Aplicação

Vamos agora demonstrar como a função execCommand funciona, abaixo segue uma página com um link, o onclick chama a função JavaScript italico(), logo abaixo um frame com o id "editor" que será nossa área de edição de conteúdo.

<html>

<head>

<title>Editor de Texto JavaScript ::: Linha de Código</title>

function Iniciar() {

editor.document.designMode = "On";

}

function italico() {

editor.document.execCommand("italic", false, null);

}

</script>

<a href="#" onClick="italico()">Italico</a><br>

A função iniciar() é chamado no evento onLoad do Tag . Nosso frame chamado editor será utilizado para escrever e editar textos, para isso devemos setar o atributo designMode para "ON". Se você não fizer isso e atualizar a página, você não poderá editar nada no frame.

Quando você clica no link italico, é chamado a função italico() executando o execCommando e o texto que você digitou e selecionou ficará italico.

function italico() {

editor.document.execCommand("italic", false, null);

}

Agora que vimos como o método execCommand funciona, vamos olhar uma lista de alguns dos comandos que nós podemos executar com ele:

· cut: Recorta o texto selecionado do frame para a área de transferência.

· copy: Copia o texto selecionado do frame para a área de transferência.

· pasta: cola os dados da área de transferência no frame.

· undo: desfazer uma ação.

· redo: refazer um ação desfeita.

· bold: transforma pra negrito.

· italic: transforma para italico.

· underline: sublinha o texto.

· justifyleft: alinha a esquerda.

· justifycenter: alinha centralizado.

· justifyright: alinha a direita.

· insertorderedlist: realiza numeração com as linhas selecionadas.

· insertunorderedlist: coloca marcadores nas linhas selecionadas.

· fontname: muda a fonte do texto selecionado.

· fontsize: muda o tamanho do texto selecionado.

As opções fontname e fontsize recebem como terceiro parâmetro do método execCommand a fonte e o tamanho respectivamente, enquanto que nas outras opções recebem null, como por exemplo:

editor.document.execCommand("fontname", false, "Courier");

editor.document.execCommand("fontsize", false, "3");

Como você pode ver, nós podemos fazer algumas coisas poderosas com o método execCommand(). O editor de texto completo da figura abaixo, com todas as opções apresentadas acima está disponível para download logo abaixo.

Clique aqui para fazer o downloads do arquivo.

Neste artigo nós aprendemos como usar o método execCommand() para formatar textos, deixando de lado outras funcionalidades mais avançadas presentes nos atuais editores, como hiperlinks, uploads de imagens entre outras. Um abraço a todos, até a próxima.

Desenvolvimento - Javascript

Leia também