Desenvolvimento - JavascriptFeed de artigos deste autor

Javascript: Construindo um editor de texto

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.

por Robstown Holanda



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>

<script language="JavaScript">

function Iniciar() {

editor.document.designMode = "On";

}

function italico() {

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

}

</script>

<body onLoad="Iniciar()">

<center>

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

<iframe id="editor" frameborder="0"

>

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.

Robstown Holanda

Robstown Holanda - Bacharel em Sistema de Informação/Faculdade Christus e Análise de Sistemas/FIC. É desenvolvedor web desde 2002 com experiência em PHP, Java, JS, MySQL, PostgreSQL e atualmente trabalha como desenvolvedor J2EE.