value Iframe

carolina3 · #1 (**permalink**) 13/03/2012, 11:41

hola no se si lo que quiero hacer es posible, ni estoy segura si este tema debería ir aquí pero no se donde preguntar.Posible debe ser pero no se si de la manera que digo.

El caso es que tengo un editor de texto para editar un comentario de mi web que se guarda en una base de datos, y me gustaría que cuando hay un dato guardado en el registro y alguien accede al editor de texto este dato que sera un texto aparezca en lo que es el iframe donde se edita el texto para después guardarlo en el registro de la base de datos, es decir si hay ya un registro y alguien quiere volver a editarlo que lo pueda ver en el editor para posterior modificarlo y volverlo aguardar. he intentado dándole la propiedad de value al iframe poniendo dentro de value el registro de la base de datos pero no funciona.

no se quizas sea por la parte de javascript dándole valor a lo que se llama textEditor que es el id que después se le da al iframe para editar el texto, no se si me explico bien pongo el código de la pagina para ver si alguien puede darme una idea.

Código HTML:

Ver original<html>
<head>
<script language="javascript">
 
function setHidden()
{
var frameContent=textEditor.document.body.innerHTML;
document.getElementById('comentario1').value=frameContent;
}
 
 
<!--
function def()
{
var testframe = document.createElement("iframe");
testframe.name = testframe.id = "textEditor";
 
 
if (testframe.addEventListener){
testframe.addEventListener("load",function(e){this.contentWindow.document.designMode = "on";}, false);
} else if (testframe.attachEvent){
testframe.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";});
}
 
 
 
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:25px; }</style> </head>');//esta linea nos da el estilo con el que escribimos dentro del iframe demomento solo se eso 
textEditor.document.close();
textEditor.focus();
 
 
 
}
function fontEdit(x,y)
{
textEditor.document.execCommand(x,"",y);
textEditor.focus();
}
-->
</script>
</head>
<body onLoad="def()" ><center>
 
<div style="width:500px; text-align:left;  margin-bottom:10px ">
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" />
<input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" />
<select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
 
</select>
<select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
<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 id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
<option style="color:red;" value="red">rojo</option>
<option value="black">negro</option>
<option style="color:blue;" value="blue">azul</option>
<option style="color:green;" value="green">verde</option>
<option style="color:pink;" value="pink">rosa</option>
<option style="color:yellow;" value="yellow">amarillo</option>
<option style="color:white;" value="white">blanco</option>
<option style="color:brown;" value="brown">marron</option>
<option style="color:grey;" value="grey">gris</option>
<option style="color:orange;" value="orange">naranja</option>
</select> 
<input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="•" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="&laquo;" onClick="fontEdit('outdent')" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="&raquo;" onClick="fontEdit('indent')" title="Indent" />
</div>
<form action="accesocomentario1.php" method="post" onSubmit="setHidden()">
  <input type="hidden" name="comentario1" id="comentario1"  />
  <input type="hidden" name="web" id="web" value="<?php echo $_SESSION['MM_Username']; ?>"/>
<input type="submit" value="submit" />
</form>
 
<iframe id="textEditor" style="width:450px; height:160px; background-color:#FFF;" frameborder="1"  >
</iframe> 
 
</center>
 
 
</body>
</html>
<?php
mysql_free_result($textostienda);
?>

gracias por este foro

ocp001a · #2 (**permalink**) 13/03/2012, 11:58

Nuevamente, es tema de javascript, no de php.
La mecánica sería así: con php lees la bd, si ya hay datos, creas en el html de salida una variable en js que contenga el texto de la bd, y en js después de convertir el iframe en editable le colocas el texto de la variable, o incluso puede ser directamente, algo así como

function def()
{
var testframe = document.createElement("iframe");
testframe.name = testframe.id = "textEditor";

if (testframe.addEventListener){
testframe.addEventListener("load",function(e){this .contentWindow.document.designMode = "on";}, false);
} else if (testframe.attachEvent){
testframe.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";});

<?php
$contenido=mysql_fetch_assoc(mysql_query("select contenido from tabla"));
echo this.contentWindow.document.innerHTML='$contenido' ;
?>
}

Claro que tendrás que ver la forma de escapar el texto en caso de contener comillas, entre otras cosas.

carolina3 · #3 (**permalink**) 13/03/2012, 12:07

ocp001a vale el php que has puesto lo entiendo creas una variable con el contenido del registro de la bd pero como le pasas ese valor de la variable al iframe , y a la ultima linea que has puesto sobre las comillas a que te refieres ?

perdona que te pregunte es que no quiero liarla y después empezar a tener problemas con este editor que ya de por si me da problemillas al copiar texto cuando copio y pego en el, pero bueno poco a poco.

ocp001a · #4 (**permalink**) 13/03/2012, 12:28

En la linea
echo "this.contentWindow.document.innerHTML='$conte nido[contenido]' ";//(le hice una pequeña corrección)

php escribiría en el html una instrucción javascript que colocaría el contenido de la bd en el iframe.

Lo de las comillas es por lo siguiente: imagina que un usuario escribe comillas (dobles o sencillas) y lo guardas en la bd. Al recuperar el texto y querer colocarlo como código de javascript, las comillas pueden crear conflicto:

$texto="El camello 'azul' ";
//al colocar:
echo "this.contentWindow.document.innerHTML='$conte nido[contenido]' ";

en el html quedaría así:

echo "this.contentWindow.document.innerHTML='El camello 'azul' ' ";

Como verás, quedan apostrofes dentro de apostrofes, causando un conflicto, debería quedar
echo "this.contentWindow.document.innerHTML='El camello \'azul\' ' ";

carolina3 · #5 (**permalink**) 13/03/2012, 12:45

voy aprobar después te explico , gracias otra vez te debo unas 10 :)