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:
<body onLoad="def()">
<div style="width:500px; text-align:left; margin-bottom:10px ">
<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>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="size">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="color">
<option value="black">-</option>
<option style="color:red;" value="red">-</option>
<option style="color:blue;" value="blue">-</option>
<option style="color:green;" value="green">-</option>
<option style="color:pink;" value="pink">-</option>
</select> |
<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" />
</div>
Em seguida temos de criar um iframe, isto é, onde o texto será escrito e editado.
<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>
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.
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.
<script type="text/javascript">
<!--
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
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.
É 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.
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="B" onClick="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>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
<option value="black">-</option>
<option style="color:red;" value="red">-</option>
<option style="color:blue;" value="blue">-</option>
<option style="color:green;" value="green">-</option>
<option style="color:pink;" value="pink">-</option>
</select> |
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 <body onLoad="def()">.
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 <body onLoad="def()">.
Como o post ficou muito grande vou hospedar o codigo completo para download neste link
3 comentários:
copiei o tutorial e vou testar no meu site
Muito bom, são poucos os que sabem como usar um iframe deste modo.
será que era possível ver o código completo
o link não está disponível
Postar um comentário