Foros del Web » Programando para Internet » Javascript »

execCommand - HELPSITO...

Estas en el tema de execCommand - HELPSITO... en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/09/2010, 15:18
 
Fecha de Ingreso: octubre-2003
Ubicación: lima
Mensajes: 57
Antigüedad: 20 años, 6 meses
Puntos: 0
Sonrisa execCommand - HELPSITO...

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,...
__________________
GUMER FERNANDEZ HUATUCO
--------------------------------------
Solo hay un dio$
  #2 (permalink)  
Antiguo 15/09/2010, 17:52
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 9 meses
Puntos: 1532
Respuesta: execCommand - HELPSITO...

esa propiedad es soportada por muy pocos navegadores, exclusivamente los IE más recientes, y los parámetros dependen del navegador, los editores WYSIWYG suelen usar un iframe
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 17/09/2010, 02:44
 
Fecha de Ingreso: octubre-2003
Ubicación: lima
Mensajes: 57
Antigüedad: 20 años, 6 meses
Puntos: 0
Respuesta: execCommand - HELPSITO...

Ok, muchas gracias por la aclaración, la solución sería utilizar un textarea oculto, y lanzarlo al iframe... ok, ok... ahora la pregunta es COMO ... ¿? ya estare en eso.
Gracias. espero que a alguien le sirva mi pequeño aporte...
__________________
GUMER FERNANDEZ HUATUCO
--------------------------------------
Solo hay un dio$

Etiquetas: execcommand
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:08.