Este fomo me ha ayudado mucho ... en
muchos aspectos...Les estoy agradecido...
Bueno, a mi problema...
Estoy haciendo un pequeño editor de texto enriquecido con un iframe. Adjunto el codigo que creo que sera de ayuda para algunos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
<!--
var iNumDoc = 1;
var sNomDoc = "Documento" + iNumDoc + ".htm";
var bCodigo = 0;
window.onload = function(){comienzo()};
function comienzo(){
if (!document.execCommand){
alert("Función no disponible");
return false;
}
var iCont, sElemento, oOpcion;
for (iCont = 0 ; iCont < document.all.length ; iCont++)
document.all(iCont).unselectable = 'on';
frmEditor.document.execCommand("EditMode");
frmEditor.document.execCommand("LiveResize", false, true);
frmEditor.document.execCommand("2D-Position", false, true);
frmEditor.document.execCommand("MultipleSelection" , false, true);
// Inicializamos las fuentes del sistema
// Tipos:
for (iCont = 1 ; iCont <= document.getElementById("dialogHelper").fonts.coun t ; iCont++){
sElemento = document.getElementById("dialogHelper").fonts.item (iCont);
oOpcion = document.createElement("option");
oOpcion.value = sElemento;
oOpcion.text = sElemento;
document.getElementById("sltTipoFuentes").add(oOpc ion);
}
// Tamaños:
for (iCont = 1 ; iCont < 8 ; iCont ++){
oOpcion = document.createElement("option");
oOpcion.value = iCont;
oOpcion.text = iCont;
document.getElementById("sltTamFuentes").add(oOpci on);
}
// Inicializamos los formatos del sistema
// Tipos:
for (iCont = 1 ; iCont <= document.getElementById("dialogHelper").blockForma ts.count ; iCont++){
sElemento = document.getElementById("dialogHelper").blockForma ts.item(iCont);
oOpcion = document.createElement("option");
oOpcion.value = sElemento;
oOpcion.text = sElemento;
document.getElementById("sltFormatos").add(oOpcion );
}
frmEditor.focus();
}
function comando_documento(sComando, bInterfaz_de_usuario, Anadido){
if (!document.execCommand){
alert("Función no disponible");
return false;
}
frmEditor.document.execCommand(sComando, bInterfaz_de_usuario, Anadido);
frmEditor.focus();
}
function color(sComando){
if (!document.execCommand){
alert("Función no disponible");
return false;
}
var iColor = document.getElementById("dialogHelper").ChooseColo rDlg(0xFFFFFF);
var sColor = iColor.toString(16);
sColor = "#" + "000000".substring(0, 6 - sColor.length) + sColor;
frmEditor.document.execCommand(sComando, false, sColor);
frmEditor.focus();
}
function ancla(){
if (!document.execCommand){
alert("Función no disponible");
return false;
}
var sNombre = prompt("Introduce el nombre del ancla", "");
frmEditor.document.execCommand("CreateBookmark", false, sNombre);
frmEditor.focus();
}
function insertar_elemento(sElemento){
if (!document.execCommand){
alert("Función no disponible");
return false;
}
switch(sElemento){
case "InsertImage":
frmEditor.document.execCommand(sElemento, true);
break;
default:
var sNombre = prompt("Introduce el id (identificador) del elemento", "");
frmEditor.document.execCommand(sElemento, true, sNombre);
break;
}
frmEditor.focus();
}
function cambio_archivo(){
if (confirm("¿Desea guardar el documento actual?"))
comando_documento("saveAs", true, sNomDoc);
var archivo = objFichero.value
frmEditor.location.href = archivo;
sNomDoc = archivo.substring(archivo.lastIndexOf("\\") + 1);
}
function nuevo(){
if (confirm("¿Desea guardar el documento actual?"))
comando_documento("saveAs", true, sNomDoc);
frmEditor.location.href = "about
:blank";
sNomDoc = "Documento" + (++iNumDoc) + ".htm";
}
function codigo(objBoton){
if (bCodigo){
bCodigo = 0;
objBoton.innerText = "Ver código";
frmEditor.document.body.innerHTML = frmEditor.document.body.innerText;
var vContenedor = document.getElementById("cldBotones").children;
for (var iCont = 0 ; iCont < vContenedor.length ; iCont++)
vContenedor.item(iCont).disabled = false;
var vContenedor = document.getElementById("cldOpciones").children;
for (var iCont = 0 ; iCont < vContenedor.length ; iCont++)
vContenedor.item(iCont).disabled = false;
}else{
bCodigo = 1;
objBoton.innerText = "Ver diseño";
frmEditor.document.body.innerText = frmEditor.document.body.innerHTML;
var vContenedor = document.getElementById("cldBotones").children;
for (var iCont = 0 ; iCont < vContenedor.length ; iCont++){
if ((vContenedor.item(iCont).type == "button") && (vContenedor.item(iCont).name != "codigo"))
vContenedor.item(iCont).disabled = true;
else
vContenedor.item(iCont).disabled = false;
}
var vContenedor = document.getElementById("cldOpciones").children;
for (var iCont = 0 ; iCont < vContenedor.length ; iCont++)
vContenedor.item(iCont).disabled = true;
}
}
//-->
</script>
</head>
<body>
<table>
<tr><td>
<span onclick="comando_documento('Print')"><b>IMPRIMIR</b></span>
<span onclick="comando_documento('Bold')"><IMG title="Negrita" alt="Negrita" src="images/bold.gif" width=25 height=24></span>
<span onclick="comando_documento('InsertUnorderedList')" ><IMG title="Lista" alt="Lista" src="images/list_unordered_on.gif" width=25 height=24></span>
<span onclick="codigo(this)" name="codigo" id="codigo">Ver código</span>
<span onclick="color('BackColor')"><IMG title="Establecer color de fondo" alt="Establecer color de fondo" src="images/backcolor_on.gif" width=25 height=24></span>
<span onclick="color('ForeColor')"><IMG title="Establecer color de la fuente" alt="Establecer color de la fuente" src="images/forecolor_on.gif" width=25 height=24></span>
</td>
</tr>
<tr>
<td>
<select name="sltTipoFuentes" id="sltTipoFuentes" class="areatexto" onchange="comando_documento('FontName', false, this.value);this.value=0;">
<option Value=0>Cambiar fuente:</option>
</select>
<select name="slt" id="sltTamFuentes" class="sltTamFuentes" onchange="comando_documento('FontSize', false, this.value);this.value=0;">
<option Value=0>Tamaño fuente:</option>
</select>
<select name="sltFormatos" id="sltFormatos" class="areatexto" onchange="comando_documento('FormatBlock', false, this.value);this.value=0;">
<option Value=0>Cambiar formato:</option>
</select>
</td>
</tr>
<tr><td>
<? // Los item object e input no varian la funcionalidad de la pagina visiblemente. ?>
<object name="dialogHelper" id="dialogHelper" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0"></object>
<input type="file" name="objFichero" id="objFichero" value="about
:blank" onchange="cambio_archivo()" style="display:none;width:0px;height:0px;">
<iframe height="300" width="900" name="frmEditor" id="frmEditor" src="about
:blank"></iframe>
</td></tr>
<table>
<script language="javascript">
<!--
function prueba(){
alert("Entro")
//a = window.frames.frmEditor;
//var ifr = document.getElementById(frmEditor).contentWindow.d ocument;
//frmEditor.document.execCommand("EditMode", false);
a = document.getElementById("frmEditor").contentWindow .document.body.innerHTML;
//frmEditor.document.execCommand("EditMode", true);
//a.document.clear();
//a.document.open();
//b = a.document.readln();
//a.document.writeln("HOLA MUNDO CRUEL Y DESPIADADO");
//a.document.close();
alert(a);
}
//-->
</script>
<span onclick="prueba()">PRUEBA</span>
</body>
</html>
Ahora bien, funciona de maravilla.. aunque hay que depurarlo un poco ... quita el <object y el <input para quedarme con el iframe solo .... y reutilizarlo en otro lado... A lo que voy es, que funcion muy bien en IE8 que lo tengo probado ... pero no funciona para MOZILLA ni para CHROME y supongo que tampoco para muchos otros... asi que revisando el codigo deduje que el problema esta aqui:
frmEditor.document.execCommand("EditMode");
Entonces la pregunta del MILLON...
como hago para que el "EditMode" funcione en los otros exploradores, como como hago para que document.execCommand contenga el EDITMODE ... creo que me entienden...
Este textarea enriquecido que se tiene en el foro tambien funciona en chorome, por lo que debe funcionar en muchos otros, voy a comensar a desenmarañar su codigo...
Gracias espero un poco de ayuda,...