Criando um Editor de Textos em JavaScript

Este tutorial é bem útil para quem quer ter um editor de texto dentro de uma página no próprio site, muito fácil e legal de fazer, com um pouquinho de conhecimento em JavaScript basta pra pelo menos editar o codigo a seguir e deixla-lo personalizado, se voce ainda não sabe nada de JavaScript, vale a pena visitar os posts anteriores com boas explicações.

Primeiro de tudo temos que criar os elementos HTML que vamos usar para mudar o conteúdo e a aparência do que está dentro do editor de texto Rich:


<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B” />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I” />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U” /> |
<input type="button" style="height:21px; width:21px;"value="L" title="align left” />
<input type="button" style="height:21px; width:21px;"value="C" title="center” />
<input type="button" style="height:21px; width:21px;"value="R" title="align right” /> |
<select id="fonts“>
<option value=“Arial”>Arial
<option value=“Comic Sans MS”>Comic Sans MS
<option value=“Courier New”>Courier New
<option value=“Monotype Corsiva”>Monotype
<option value=“Tahoma”>Tahoma
<option value=“Times”>Times

<select id="size“>
<option value="1“>1
<option value="2“>2
<option value="3“>3
<option value="4“>4
<option value="5“>5

<select id="color“>
<option value=“black”>-
<option style=“color:red;” value=”red”>-
<option style=“color:blue;” value=”blue”>-
<option style=“color:green;” value=”green”>-
<option style=“color:pink;” value=”pink”>-
|
<input type="button" style="height:21px; width:21px;"value="1" title="Numbered List” />
<input type="button" style="height:21px; width:21px;"value="●" title="Bullets List” />
<input type="button" style="height:21px; width:21px;"value="←" title="Outdent” />
<input type="button" style="height:21px; width:21px;"value="→" title="Indent” />

Em seguida temos de criar um iframe, isto é, onde o texto será escrito e editado.

<iframe id="textEditor” style=”width:500px; height:170px;”>

Podemos agora escrever o código Javascript.
Primeiro de tudo, a fim de usar o iFrame é preciso defini-lo como modo de design. Então nós temos que abrir, escrever e fechar esse iFrame.



<!–
textEditor.document.designMode=”on”;
textEditor.document.open();
textEditor.document.write(‘<style type="text/css“>body{ font-family:arial; font-size:13px;}’);
textEditor.document.close();

Você pode ver que o método write () tem alguns CSS para um parâmetro – que é porque eu queria definir a fonte padrão do iFrame e tamanho da fonte.
É hora de escrever a função que será chamada pelos elementos HTML criado anteriormente. Esta é uma função muito simples, precisamos apenas de 2 métodos iFrame: execCommand () e foco (). execCommand () vai executar um comando no documento atual, a seleção atual, ou o intervalo dado, e focus () vai dar o foco volta para o iFrame.


function fontEdit(x,y)
{
textEditor.document.execCommand(x,””,y);
textEditor.focus();
}

Vamos usar essa função com todos os elementos HTML. Vamos começar com o botão Negrito.
Só temos de definir o evento que irá chamar a função, e dar um parâmetro para a função. Porque é um botão, vamos usar o evento onClick.


<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="BonClick=”fontEdit(‘bold‘)” />

Quando chamado, a função fará o texto em negrito. Nós fazemos a mesma coisa para o resto dos botões, alterando o parâmetro.


<input type="button" id="italic” style=”height:21px; width:21px; font-style:italic;” value=”I” onClick=”fontEdit(‘italic’)” />
<input type="button" id="underline” style=”height:21px; width:21px; text-decoration:underline;” value=”U” onClick=”fontEdit(‘underline’)” /> |
<input type="button" style="height:21px; width:21px;"value="L” onClick=”fontEdit(‘justifyleft‘)” title=”align left” />
<input type="button" style="height:21px; width:21px;"value="C” onClick=”fontEdit(‘justifycenter‘)” title=”center” />
<input type="button" style="height:21px; width:21px;"value="R” onClick=”fontEdit(‘justifyright‘)” title=”align right” /> |

Agora é hora de cuidar da Fonte suspensa, tamanho e cor listas. Porque estas listas têm vários valores, temos que passar o valor do índice selecionado como o segundo parâmetro. Além disso, o evento que irá chamar a função será onChange.


<select id="fonts” onChange=”fontEdit(‘fontname’,this[this.selectedIndex].value)”>
<option value=“Arial”>Arial
<option value=“Comic Sans MS”>Comic Sans MS
<option value=“Courier New”>Courier New
<option value=“Monotype Corsiva”>Monotype
<option value=“Tahoma”>Tahoma
<option value=“Times”>Times

<select id="size” onChange=”fontEdit(‘fontsize’,this[this.selectedIndex].value)”>
<option value=“1”>1
<option value=“2”>2
<option value=“3”>3
<option value=“4”>4
<option value=“5”>5

<select id="color” onChange=”fontEdit(‘ForeColor’,this[this.selectedIndex].value)”>
<option value=“black”>-
<option style=“color:red;” value=”red”>-
<option style=“color:blue;” value=”blue”>-
<option style=“color:green;” value=”green”>-
<option style=“color:pink;” value=”pink”>-
|

Por exemplo Fontedit ( ‘FontName’, ‘vezes’) irá alterar o tipo de letra para Times. É fácil descobrir como as outras listas dropdown vai funcionar.
Finalmente, eu fiz uma função para definir o estado nas listas suspensas ‘default, o que ajudaria na lista suspensa Fonte evitar escrever “Times” após a atualização (quando a fonte padrão é Arial), por exemplo. A função será chamado de carga, por .

Como o post ficou muito grande vou hospedar o codigo completo para download neste link

Uma resposta to “Criando um Editor de Textos em JavaScript”

  1. Fabiano Roberto Says:

    copiei o tutorial e vou testar no meu site

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: