Como Criar Uma Toolbar Para Um Textarea

[Guest Dill]

eae pessoal, alguém tem um script de como criar essa toolbar onde se pode escolher o tipo de fonte, tamanho, cor, negrito, itálico, smiles etc etc etc, para um textarea??

algo como a deste forum

vlw

[Error404]

Movendo para JS.

[Fabyo]

<script>

function exec(c,i,v){

visual.focus();

var sel = document.selection.createRange();

document.execCommand(c, i, v);

visual.focus();

}

function citar(id)

{

visual.focus();

var sel = document.selection.createRange();

if(sel.text==null || sel.text==""){

return false;

}else{

var texto = new String(sel.text);

texto2 = texto.replace(/\n/g, '<BR>');

sel.pasteHTML('<table id=' + id + '><tr><td>' + texto2 + '</td></tr></table>');

}

visual.focus();

}

function smilie(texto, src)

{

visual.focus();

var sel = document.selection.createRange();

sel.pasteHTML('<IMG SRC="' + src + '" ALT="' + texto + '">');

visual.focus();

}

function img()

{

visual.focus();

var sel = document.selection.createRange();

var nome = window.prompt("Imagem URL:", "http://");

var alt = window.prompt("Breve Descrição:", "");

if (nome && nome != "http://" && alt){

sel.pasteHTML('<IMG SRC="' + nome + '" ALT="' + alt + '">');

}else{

alert("Por favor preencha todos os Campos !");

}

visual.focus();

}

function obj()

{

visual.focus();

var sel = document.selection.createRange();

var nome = window.prompt("Objeto URL:", "http://");

if (nome && nome != "http://"){

sel.pasteHTML('<embed src="' + nome + '">');

}else{

alert("Por favor a url do Objeto !");

}

visual.focus();

}

function email(){

visual.focus();

var sel = document.selection.createRange();

var nome = window.prompt("E-Mail:", "");

if (!nome){

alert("Por favor preencha o E-Mail !");

}else{

sel.pasteHTML('<a href="mailto:' + nome + '" title="' + nome + '">' + nome + '</a>');

}

visual.focus();

}

function url(){

visual.focus();

var sel = document.selection.createRange();

var nome = window.prompt("Titulo do Link:", "Link");

var url = window.prompt("URL:", "http://");

if (nome && url != "http://" && url){

sel.pasteHTML('<a href="' + url + '" title="' + url + '">' + nome + '</a>');

}else{

alert("Por favor preencha todos os Campos !");

}

visual.focus();

}

function linha©{

visual.focus();

var sel = document.selection.createRange();

sel.pasteHTML('<'+ c + '>');

visual.focus();

}

</script>

<style type='text/css'>

#QUOTE {

  font-family: Arial;

  font-size: 11px;

  background-color: #FAFCFE;

  color: #465584;

  border: 1px solid #000000;

  padding: 8px;

}

#CODE {

  font-family: Courier, Courier New, Verdana, Arial;

  font-size: 11px;

  background-color: #FAFCFE;

  color: #465584;

  border: 1px solid #000000;

  padding: 8px;

}

</style>

<div id="visual" style="border: 1px solid #000000; padding: 4px; overflow: scroll; height: 70%; width: 70%;" contenteditable ></div>

<br>

<SELECT UNSELECTABLE="on" ID="font_face" onchange='exec("FontName", "", this.options[this.selectedIndex].value); document.all["font_face"].selectedIndex  = 0;'>

  <OPTION VALUE=#" SELECTED>Font</OPTION>

  <OPTION VALUE="#"></OPTION>

  <OPTION VALUE="arial">Arial</OPTION>

  <OPTION VALUE="arial black">Arial Black</OPTION>

  <OPTION VALUE="comic sans ms">Comic Sans MS</OPTION>

  <OPTION VALUE="courier new">Courier New</OPTION>

  <OPTION VALUE="georgia">Georgia</OPTION>

  <OPTION VALUE="impact">Impact</OPTION>

  <OPTION VALUE="tahoma">Tahoma</OPTION>

  <OPTION VALUE="trebuchet ms">Trebuchet MS</OPTION>

  <OPTION VALUE="verdana">Verdana</OPTION>

  <OPTION VALUE="times new roman">Times New Roman&nbsp;</OPTION>

</SELECT>

<SELECT UNSELECTABLE="on" ID="font_size" onchange='exec("FontSize", false, this.options[this.selectedIndex].text); document.all["font_size].selectedIndex  = 0;'>

  <OPTION VALUE="#" SELECTED>Size</OPTION>

  <OPTION VALUE="#"></OPTION>

  <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>

  <OPTION VALUE="6">6</OPTION>

  <OPTION VALUE="7">7</OPTION>

</SELECT>

<SELECT UNSELECTABLE="on" ID="font_color" onchange='exec("ForeColor", false, this.options[this.selectedIndex].value); document.all["font_color"].selectedIndex  = 0;'>

  <OPTION VALUE=#" SELECTED>Cor</OPTION>

  <OPTION VALUE="#"></OPTION>

  <OPTION VALUE="black"  STYLE="color: black">Preto</OPTION>

  <OPTION VALUE="darkred" STYLE="color: darkred">Marrom</OPTION>

  <OPTION VALUE="red"    STYLE="color: red">Vermelho</OPTION>

  <OPTION VALUE="orange"  STYLE="color: orange">Laranja</OPTION>

  <OPTION VALUE="yellow"  STYLE="color: yellow">Amarelo</OPTION>

  <OPTION VALUE="lime"    STYLE="color: lime">Verde Claro</OPTION>

  <OPTION VALUE="green"  STYLE="color: green">Verde</OPTION>

  <OPTION VALUE="aqua"    STYLE="color: aqua">Azul Piscina</OPTION>

  <OPTION VALUE="blue"    STYLE="color: blue">Azul</OPTION>

  <OPTION VALUE="navy"    STYLE="color: navy">Azul Escuro</OPTION>

  <OPTION VALUE="violet"  STYLE="color: violet">Violeta</OPTION>

  <OPTION VALUE="gray"    STYLE="color: gray">Cinza</OPTION>

</SELECT>

<SELECT UNSELECTABLE="on" ID="font_bgcolor" onchange='exec("BackColor", false, this.options[this.selectedIndex].value); document.all["font_bgcolor].selectedIndex  = 0;'>

  <OPTION VALUE="#" SELECTED>Fundo</OPTION>

  <OPTION VALUE="#"></OPTION>

  <OPTION VALUE="black"  STYLE="color: black">Preto</OPTION>

  <OPTION VALUE="darkred" STYLE="color: darkred">Marrom</OPTION>

  <OPTION VALUE="red"    STYLE="color: red">Vermelho</OPTION>

  <OPTION VALUE="orange"  STYLE="color: orange">Laranja</OPTION>

  <OPTION VALUE="yellow"  STYLE="color: yellow">Amarelo</OPTION>

  <OPTION VALUE="lime"    STYLE="color: lime">Verde Claro</OPTION>

  <OPTION VALUE="green"  STYLE="color: green">Verde</OPTION>

  <OPTION VALUE="aqua"    STYLE="color: aqua">Azul Piscina</OPTION>

  <OPTION VALUE="blue"    STYLE="color: blue">Azul</OPTION>

  <OPTION VALUE="navy"    STYLE="color: navy">Azul Escuro</OPTION>

  <OPTION VALUE="violet"  STYLE="color: violet">Violeta</OPTION>

  <OPTION VALUE="gray"    STYLE="color: gray">Cinza</OPTION>

</SELECT>

<br>

<BUTTON ID="Negrio" TITLE="Negrio (Ctrl+" onclick='exec("Bold");'>Bold</BUTTON> 

<BUTTON ID="Italico" TITLE="Italico (Ctrl+I)" onclick='exec("Italic");'>Italic</BUTTON> 

<BUTTON ID="UnderLine" TITLE="UnderLine (Ctrl+U)" onclick='exec("Underline");'>UnderLine</BUTTON> 

<BUTTON ID="Recortar" TITLE="Recortar (Ctrl+X)" onclick='exec("Cut");'>Recortar</BUTTON> 

<BUTTON ID="Copiar" TITLE="Copiar (Ctrl+C)" onclick='exec("Copy");'>Copiar</BUTTON> 

<BUTTON ID="Colar" TITLE="Colar (Ctrl+V)" onclick='exec("Paste");'>Colar</BUTTON> 

<BUTTON ID="Desfazer" TITLE="Desfazer" onclick='exec("Undo");'>Desfazer</BUTTON> 

<BUTTON ID="Refazer" TITLE="Refazer" onclick='exec("Redo");'>Refazer</BUTTON> 

<br>

<BUTTON ID="Left" TITLE="Alinhado a Esquerda" onclick='exec("JustifyLeft");'>-__</BUTTON> 

<BUTTON ID="Center" TITLE="Alinhado ao Centro" onclick='exec("JustifyCenter");'>_-_</BUTTON> 

<BUTTON ID="Right" TITLE="Alinhado a Direita" onclick='exec("JustifyRight");'>__-</BUTTON> 

<BUTTON ID="Lista1" TITLE="Lista nº" onclick='exec("InsertOrderedList");'>Lista nº</BUTTON> 

<BUTTON ID="Lista2" TITLE="Lista º" onclick='exec("InsertUnorderedList");'>Lista º</BUTTON> 

<BUTTON ID="Margem+" TITLE="Margem +" onclick='exec("Indent");'>Margem +</BUTTON> 

<BUTTON ID="Margem-" TITLE="Margem -" onclick='exec("Outdent");'>Margem -</BUTTON> 

<BUTTON ID="Imagem" TITLE="Imagem" onclick='img();'>Imagem</BUTTON> 

<BUTTON ID="Citar" TITLE="Citar" onclick='citar("QUOTE");'>Quote</BUTTON> 

<br>

<BUTTON ID="Email" TITLE="E-Mail" onclick='email();'>E-Mail</BUTTON>

<BUTTON ID="Url" TITLE="Url" onclick='url();'>Url</BUTTON>

<BUTTON ID="Obj" TITLE="Qualquer tipo de objeto" onclick='obj();'>Obj</BUTTON>

<BUTTON ID="Hr" TITLE="Linha" onclick='linha("HR");'>Linha</BUTTON>

<BUTTON ID="Superscript" TITLE="Superscript" onclick='exec("Superscript");'>Superscript</BUTTON>

<BUTTON ID="Subscript" TITLE="Subscript" onclick='exec("Subscript");'>Subscript</BUTTON>

<BUTTON ID="Codigo" TITLE="Code" onclick='citar("CODE");'>Code</BUTTON> 

[renan_doidera]

Este script está dando erro aqui Fábyo ...

[Fabyo]

aqui ta normal, se ta usando o IE ?

[Heldinho]

Ae, talvez o erro seja o smyle que apareceu no código fonte... até mais..