Formato textarea

ferent · #1 (**permalink**) 21/09/2004, 05:25

Buenos días;

En la faq de javascript http://www.forosdelweb.com/showthrea...843#post260843 se la la posibilidad de insertar formato de texto (negrita, subrayado..) directamente donde se encuentra el cursor.

Y mi duda es: ¿Se puede hacer para que si yo marco un texto con el ratón, y le dé a por ejemplo "Negrita", ya me aparezca en el campo para escribir en negrita, la frase que tenga marcada?

Gracias

claray · #2 (**permalink**) 21/09/2004, 14:48

Bueno, aqui te presto un código que desarrolle hace un tiempo y es un pequeño editor que hace algunas de las cosas

Este fue desarrollado para ser mostrado en un dialog (IE) con showModalDialog, por lo que comenté un par de lineas qe tenian que ver con el pase de parametros al dialogo...

Bueno, eso, saca lo que quieras (o puedas)...

<HTML><HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Expires" CONTENT="0">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META http-EQUIV="Cache-Control" CONTENT="private">
<meta name="Author" content="claudio araya">
<title>Editor-Avantte</title>
<STYLE>
BUTTON {cursor: hand; background: #FFFFCC; border-color: #000099; font-weight: bold; font-family: Arial; font-size: xx-small; border-style: outset}
</STYLE>

<SCRIPT language="JavaScript">
//window.returnValue = 0;
//var oMisParam = window.dialogArguments;
//var texto = oMisParam.contenido;
var texto = '';
function salir(){
var retorno = document.all.oDiv.innerHTML;
window.returnValue = retorno;
window.close();
}
function endos(a){
a = '00'+a;
return a.substr(a.length-2,2);
}
function setcolor(color,g){
document.all.elcolor.style.background = color;
document.all.elcolor.value=color.toUpperCase();
if (g>127) {document.all.elcolor.style.color = "#000000";}
else {document.all.elcolor.style.color = "#FFFFFF";}
}
function decimal(a){
a = a.toUpperCase();
switch (a) {
case "A" : n = 10; break;
case "B" : n = 11; break;
case "C" : n = 12; break;
case "D" : n = 13; break;
case "E" : n = 14; break;
case "F" : n = 15; break;
default : n = parseInt(a);
}
return n;
}
function setcolorRojo(color){
resto = decimal(color.charAt(1))*16+decimal(color.charAt(2 ));
document.all.divcolores.innerHTML = settabla(resto);
}
function settabla(r){
var elstr = '<table cellpadding=0 cellspacing=0 >';
for (var g=255;g>=0;g=g-20){
elstr = elstr+"<tr style='font-size:8'>";
for (var b=255;b>=0;b=b-20){
varstr = '"#'+endos(r.toString(16))+''+endos(g.toString(16) )+''+endos(b.toString(16))+'"';
varstr = "<td width=8 bgcolor="+varstr+" onclick='setcolor("+varstr+","+g+");' style='cursor:hand'> </td>";
elstr = elstr+varstr;
}
elstr=elstr+'</tr>';
}
elstr=elstr+'</table>'
return elstr;
}

function setAtributo(tipo){
if (oDiv.isContentEditable==true)
document.execCommand(tipo);
oDiv.focus();
}

function setFont(tipo){
var sedit = document.selection.createRange();
if (!sedit=='') {
document.execCommand("FontName","false","Arial");
document.execCommand("ForeColor","false","#00008B" );
document.execCommand("FontSize","false","2");
document.execCommand("FontName","false","Serif");
}
oDiv.focus();
}
function setFontFace(tipo){
var sedit = document.selection.createRange();
if (!sedit=='') {
document.execCommand("FontName","false","Arial");
document.execCommand("FontName","false",tipo);
}
oDiv.focus();
}
function setFontSize(tipo){
var sedit = document.selection.createRange();
if (!sedit=='') {
document.execCommand("FontSize","false",tipo);
}
oDiv.focus();
}
function setFontColor(tipo){
var sedit = document.selection.createRange();
if (!sedit=='') {
document.execCommand("ForeColor","false",tipo);
}
oDiv.focus();
}
</SCRIPT>

</HEAD>
<font face="Arial">
<BODY >

<table><tr><td width=80%>
<DIV id=oDiv contenteditable ALIGN=left STYLE="height:400; width:100%;background-color:white; font-size:xx-small; font-family:Arial; padding:3; border:inset #99ccff; scrollbar-base-color:#99ccff; overflow=auto;"></DIV>
</td>
<td>
<DIV style="padding:10px" align="center">
<span style="font-family: Arial; font-size: xx-small; font-weight: bold; color: #000099">Atributos del texto:</span><br><bR>
<BUTTON UNSELECTABLE TITLE="Negrita" onclick="setAtributo('Bold');" >N</BUTTON>
   <BUTTON UNSELECTABLE TITLE="Italicas" onclick="setAtributo('Italic');" ><I>I</I></BUTTON>
   <BUTTON UNSELECTABLE TITLE="Sub-Rayado" onclick="setAtributo('Underline');"><U>U</U> </BUTTON>
<br><br>
<span style="font-size: xx-small; font-family: Arial; color: #000099">Font:</span>
<select name="sfont" style="font-size: xx-small; font-family: Arial; color: #000099">
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Serif">Serif</option>
<option value="Courier">Courier</option>
<option value="Fixedsys">Fixedsys</option>
</select>
<BUTTON UNSELECTABLE TITLE="Selecciona Font" onclick="setFontFace(document.all.sfont.options(do cument.all.sfont.selectedIndex).value);">OK</BUTTON>
<br>
<span style="font-size: xx-small; font-family: Arial; color: #000099">Tamaño:</span>
<select name="tfont" style="font-size: xx-small; font-family: Arial; color: #000099">
<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>
<BUTTON UNSELECTABLE TITLE="Tamaño del Font" onclick="setFontSize(document.all.tfont.options(do cument.all.tfont.selectedIndex).value);">OK</BUTTON>
</DIV>
<div align="center">
<DIV style="border: thin inset blue; width: 150; padding: 5px">
<input type="text" id="elcolor" size="6" width="6" value="#0000FF" style="color: #FFFFFF; background: #0000FF" unselectable="on" readonly>
<BUTTON UNSELECTABLE TITLE="Color del Font" onclick="setFontColor(document.all.elcolor.value); ">OK</BUTTON>
<SCRIPT Language="JavaScript">
document.write('<table><tr><td>');
document.write('<div id=divcolores>'+settabla(0)+'</div>');
document.write('</td><td><table cellpadding=0 cellspacing=0 ><tr style="font-size:1">');
g=0;
b=0;
for (var r=255;r>=0;r=r-4){
varstr = '"#'+endos(r.toString(16))+''+endos(g.toString(16) )+''+endos(b.toString(16))+'"';
varstr = "<td width=8 bgcolor="+varstr+" onclick='setcolorRojo("+varstr+");' style='cursor:hand'> </td>";
document.write("<tr style='font-size:1'>"+varstr+"</tr>");
}
document.write('</table></td></tr></table>');
</script>
</div>

</td>
</tr></table>
<script language="JavaScript">document.all.oDiv.innerHTML = texto;</script>
<center>
<img src="baceptar.gif" border=0 onclick="salir();" style="cursor:hand;">  
<img src="bcancelar.gif" border=0 onclick="window.close();" style="cursor:hand;">
</center>
</body>
</html>

Saludos y suerte.

ferent · #3 (**permalink**) 22/09/2004, 01:36

Vaya, reconozco que es una maravilla

, pero al ser un div, ¿se puede enviar a través de un formulario?... En el caso maravilloso de que se pudiera, ¿como se recojen los datos (color de fuente, tipografía...) para ser tratados de la forma que corresponda (<b></b> <font></font>...)?

Gracias y felicidades por el script.

claray · #4 (**permalink**) 22/09/2004, 07:57

puedes recuperar todo el contenido del oDIV con:

var contenido = document.all.oDiv.innerHTML;

por lo que al submitirlo puedes asignarlo a una variable hidden de tu form y pasarlo a traves de ella.

espero que te sirva, como explique, yo lo usé en un dialogo y devolvia exactamente el contenido del DIV.

Saludos.

ferent · #5 (**permalink**) 22/09/2004, 09:06

Vaya, lo voy a probar ahora mismo. Muchísimas gracias Claudio!!