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.
