Pasar texto recibido por $_get() a elemento RTF en JavaScrip

GuillermoM · #1 (**permalink**) 05/04/2012, 10:13

Hola a todos. Tengo ese código fuente de un editor RTF:

Aquí el código: http://www.forosdelweb.com/f13/pasar...1/#post4116659

He conseguido gracias a vosotros sacar el texto que escribo y pasarlo a una variable $_GET(). Así:

Código Javascript:

Ver originalvar html=document.getElementById('edit').contentWindow.document.body.innerHTML;

Pero ahora necesito hacerlo a la inversa ¿Se puede? He probado con esto:

Código PHP:

 
  <?php

$contenido = $_GET["cont"];

echo "document.getElementById('edit').contentWindow.document.body.innerHTML = ".$contenido.";";

?>

Y evidentemente no funciona, sé muy poquito de JavaScrip tan poco que no sé como hacer esto tan básico. Espero vuestras respuestas y gracias de antemano.

diamari · #2 (**permalink**) 05/04/2012, 15:38

El código mostrado solo muestra como recoges el texto del elemento con el id de edit para guardarlo en el variable html, como estas pasando ese variable al variable get?

GuillermoM · #3 (**permalink**) 07/04/2012, 09:47

Cita:

Iniciado por diamari

El código mostrado solo muestra como recoges el texto del elemento con el id de edit para guardarlo en el variable html, como estas pasando ese variable al variable get?

A través de un simple enlace.

Veo que nadie contesta ¿Me estoy explicando mal?

diamari · #4 (**permalink**) 07/04/2012, 16:53

Javascript no tiene como recibir datos get, pero como estos se reciben a través del URL puedes utilizar window.location para adquirir el url y procesarlo. Hay varios paginas en la red que explican como hacer esto. En este enlace tienes un codigo que "crea" el variable $_get con los valores pertinentes

http://www.onlineaspect.com/2009/06/10/reading-get-variables-with-javascript/

GuillermoM · #5 (**permalink**) 08/04/2012, 05:43

No eso ya se hacerlo, ¿Cómo puedo insertar ese texto (que ya se como leer com JavaScrip) al editor? Recibir el texto e imprimirlo en ese "textarea" RTF.

zalito12 · #6 (**permalink**) 08/04/2012, 07:01

No estoy entendiendo muy bien lo que intentas hacer.
A ver, hay un textarea en el que se escribe texto y tu quieres recoger ese texto y luego hacer algo con él.
Si es así, que quieres hacer despues con el texto? Si no te he entendido bien por favor explica lo que quieres conseguir. Saludos

Panino5001 · #7 (**permalink**) 08/04/2012, 08:52

A ver si esto te sirve:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>editor</title> 
<style> 
input{ 
border:1px solid #000; 
background:#CCCCCC; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:9px; 
margin-bottom:3px; 
} 
</style> 
<script> 
var editor; 
function $(id){ 
    return document.getElementById(id); 
} 
function formato(f){ 
    editor.execCommand(f, false, null); 
} 
function rev(t)    { 
    return t.split("<").join("&lt;").split(">").join("&gt;").split("\"").join("&quot;"); 
} 
function insertarEnlace(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
    editor.execCommand("CreateLink",false,u); 
} 
function insertarImagen(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
    editor.body.focus(); 
    editor.execCommand("InsertImage",false,u); 
} 
function color(c){ 
    editor.execCommand("forecolor",false,c); 
} 

function colorFondo(c){ 
    var h=window.ActiveXObject?'backcolor':'hilitecolor'; 
    editor.execCommand(h,false,c); 
} 
function inHTML(){ 
    var u,u2; 
    if(!(u=prompt('ingresar html','')))return; 
     
        try{ 
            editor.execCommand("inserthtml",false,u); 
        }catch(e){ 
            try{ 
                editor.body.focus(); 
                u2=editor.selection.createRange(); 
                u2.pasteHTML(u); 
            }catch(E){ 
                alert('nop'); 
            } 
        } 
} 

function htmlOEditor(e){ 
e=e || window.event; 
ob=e.target || e.srcElement 
$('edit').style.display=(ob.value=='html')?'none':'block'; 
$('ht').style.display=(ob.value!='html')?'none':'block'; 
$('ht').innerHTML=rev(editor.body.innerHTML); 
ob.value=(ob.value=='html')?'editor':'html'; 
} 
function $_GET(x){
    var u=location.search.substr(),i=u.indexOf(x);
    if(i!=-1){
        return (u.substr(i).split('=')[1].split('&')[0]);    
    }
    return '';
}
function iniciarEditor(variableGet){
    return function(){
        editor=$('edit').contentDocument || $('edit').contentWindow.document; 
        editor.designMode='on';
        //Aquí lo que te interesa
        try{
        editor.body.innerHTML=decodeURIComponent($_GET(variableGet));
        //o editor.body.innerHTML=unescape($_GET(variableGet));
        }catch(e){
            setTimeout(iniciarEditor(variableGet),500);
        }
    }
}
window.onload=iniciarEditor('pp');

</script>   
</head> 

<body> 
<form id="form1" name="form1" method="post" action=""> 
  <input type="button" name="Submit" value="N" onclick="formato('bold')" /> 
  <input type="button" name="Submit2" value="C" onclick="formato('italic')" />
  <input type="button" name="Submit3" value="S" onclick="formato('underline')" />
  <input type="button" name="Submit4" value="remover formato" onclick="formato('RemoveFormat')" />
  <input type="button" name="Submit5" value="link" onclick="insertarEnlace()" />
  <input type="button" name="Submit9" value="quitar link" onclick="formato('Unlink')" />
  <input type="button" name="Submit6" value="imagen" onclick="insertarImagen()" />
  <input type="button" name="Submit7" value="texto rojo" onclick="color('#FF0000')" />
  <input type="button" name="Submit8" value="fondo rojo" onclick="colorFondo('#FF0000')" />
    <input type="button" name="Submit10" value="deshacer" onclick="formato('undo')" />
  <input type="button" name="Submit11" value="rehacer" onclick="formato('redo')" />

  <input type="button" name="Submit12" value="insertar html" onclick="inHTML()" />
  <br /> 
<iframe id="edit" width="100%" height="300" style=" border:1px solid #000;"></iframe> 
<div id="ht" style="width:100%; height:300px; overflow:auto; border:1px solid #000; display:none"></div> 
<div style="margin-top:3px;"><input name="ver" type="button" id="ver" onclick="htmlOEditor(event)" value="html" /></div> 
</form> 
</body> 
</html>

Lo importante de esto es:

Código PHP:

  editor.body.innerHTML=decodeURIComponent($_GET(variableGet));
        //o editor.body.innerHTML=unescape($_GET(variableGet));

Dependiendo del contexto puede ser muy inseguro, así que ojo, estás advertido

zalito12 · #8 (**permalink**) 08/04/2012, 16:02

Prueba esto:

Código PHP:

 
editor.body.innerHTML=decodeURIComponent(<?php echo $_GET(variableGet); ?>);

Debería funcionar ;)

GuillermoM · #9 (**permalink**) 09/04/2012, 04:15

Muchísimas gracias a todos por cuestro tiempo. Lo conseguí así:

Código Javascript:

Ver originaldocument.getElementById('edit').contentWindow.document.body.innerHTML = "aquí la variable de php";

Soy un pesado del copón :P De nuevo muchas gracias. Ahí va karma.

PD.: Al final, use $_POST para que sea más seguro.