Se puede hacer esto?

nuevo · #1 (**permalink**) 18/03/2005, 21:54

hola, buenas compañeros...

estoy liado con un asunto algo complicado para mi... intento mostrar en tiempo real el codigo HTML que tengo en un TEXTAEREA, en otra ventana... o frame... o como se haga, en formato HTML...

vamos a ver un ejemplo... yo tengo este textarea dentro de un formulario

Código:

<script type="text/javascript">
<!--
 function storeCaret(text) {if (text.createTextRange) {text.caretPos = document.selection.createRange().duplicate();}}
 function meter(text) {var postopic = document.PostTopic.varAdminConfigBloquesLinkCode; if (postopic.createTextRange && postopic.caretPos) { var caretPos = postopic.caretPos; caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;}   else postopic.value += text; postopic.focus(caretPos)}

  function codigo(accion) {
   switch(accion) {

    case "url":
     url = prompt("URL del Enlace", "http://");
     txt = prompt("TxT del Enlace", "");
     if(url) {
      url="<a href="+url+">"+txt+""+"</a>";
      meter(url);
     }
     break;

   case "form1":
   form1 = prompt("Texto", "");
    if(form1) {
      form1="<table width=\"576\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td>"+form1+"</td></tr></table>";
      meter(form1);
	}
     break;

   case "form2":
   form2 = prompt("Texto", "");
   img = prompt("Imagen", "");
    if(form2) {
      form2="<table width=\"576\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td><img src=\""+img+"\" height=\"32\" width=\"32\" border=\"0\"></td><td>"+form2+"</td></tr></table>";
      meter(form2);
	}
     break;

    default:
     meter(accion);
     break;
   }
  }
//-->
</script>
<!-- inicioBloque: blokeThemeEstrucPrincipalCentro -->
<form action="index.php?nucleo=adminconfigblocknewok" method="post" name="PostTopic" target="_self">
	<table class="vedit">
		<tr>
			<th colspan="2"><b>Codigo</b><br>
				<textarea name="varAdminConfigBloquesLinkCode" rows="14" cols="70" wrap="virtual"></textarea></th>
		</tr>
		<tr>
			<th colspan="2">
				<div align="center">
				    <a href="javascript:codigo('form1')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato1.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form2')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato2.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form3')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato3.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form4')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato4.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form5')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato5.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form6')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato6.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form7')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato7.gif" border="0"></a><br>
					<input type="button" class="botones" value="Url" title="Añadir Enlace" onclick="javascript:codigo('url')">
				</div>
			</th>
		</tr>
	</table>
<br>
<input type=submit value=".: Aceptar :." class="botones">&nbsp;<input type="button" value=".: Cancelar :." onclick="history.back(-1)" class="botones">
</form>
<!-- finBloque: blokeThemeEstrucPrincipalCentro -->

lo que intento es mostrar ese codigo HTML que he metido dentro del textarea en algun frame, iframe, o scr... en modo HTML, para ver como va quedando--- mientras lo voy montando...

alguien tiene idea... o lo hizo antes.,...

gracias y salu2

programeitor · #2 (**permalink**) 19/03/2005, 08:29

Hola nuevo.

He realizado este codigo segun tu consulta ,pero no logro hacerlo funcionar correctamente:

<html>
<head>
<style>
body{margin:0px;overflow:;}
#area{
position:absolute;overflow:auto;
left:0;top:0;width:50%;height:100%;padding:10px;
border:0px solid;color:black;background:#ddd;
font:10px verdana;
}
</style>
<script>
function mira(){
document.frames[0].document.body.innerHTML=""
document.frames[0].document.write(document.getElementById('area').value)
}
</script>
</head>
<body onload=mira()>

<textarea id="area" onkeypress="mira()">
<html>
<head>
<style>
h1{font:50px tahoma}
input{font:30px;border:5 solid magenta;color:aqua;}
</style>
<script>
function color(){
document.body.style.background='red'
}
function musica(){
var x=document.createElement('embed')
x.src='file:///c:/mi/musica/mp3/trompa.mp3'
x.autostart=true
x.hidden=true
document.body.appendChild(x)
}
</script>
</head>
<body>
hola
<br>
<h1>hola</h1>
<input type="button" value="color" onclick="color()">
<input type="button" value="musica" onclick="musica()">
</body>
</html>
</textarea>

<iframe name="ventana" width="50%" height="100%" align="right" marginwidth="5" marginheight="5" scrolling="auto"></iframe>
</body>
</html>


Por una parte en IE solo le puedo añadir texto plano ,en cuanto le pongo una etiqueta html ,se pone en blanco.
En NS solo me muestra el boton color ,y no reconoce ninguna entrada desde el texarea ,marcando un error de que no reconoce 'document.frames'.
Si quito document.frames[] y pongo document.ventana ocurre lo mismo.

Bueno, espero respuestas alentadoreas.

nuevo · #3 (**permalink**) 19/03/2005, 09:25

gracias amigo.... ya estoy en ello...

yo estaba mirando por Remote scripting....

programeitor · #4 (**permalink**) 19/03/2005, 14:43

He solucionado el tema para IE., consiste en cambiar la linea

document.frames[0].document.body.innerHTML=""

por

document.frames[0].document.close()

Ya solo me queda arreglarlo para NS ,creo.

A ver si alguien me hecha una mano

nuevo · #5 (**permalink**) 19/03/2005, 14:52

jajajaja, q caña de tio.-.. la maquina de programar.... muy bueno... ;)

programeitor · #6 (**permalink**) 19/03/2005, 14:58

¿No se te ocurre nada para hacerlo funcionar en NS? ,cualquier proposicion es buena

.

nuevo · #7 (**permalink**) 19/03/2005, 16:16

yo soy de php y mysql, de js no se mas q 4 cosas basicas..., ahora 5, sorry

veo algo q me llama la atencion...

cuando meto el 1º caracter... no lo muestra
cuando meto el 2º caracter... me muestra el 1º...
osea, va retrasado 1 caracter.,... y eso...?

caricatos · #8 (**permalink**) 19/03/2005, 16:43

Hola a todos:

Un viejo proyecto mío y de unos pocos usuarios de estos foros fue algo parecido: http://www.pepemolina.com/generador/generador.html

En esa página, lo que se escribe en un textarea se genera en una capa...
También tengo lo que llamo "probador de scripts"... : http://www.pepemolina.com/probador/index.html

Si algo así te interesa y no entiendes el código, puedes preguntar.

P.D: Ese tipo de títulos en los mensajes, no son nada recomendables.

Saludos

nuevo · #9 (**permalink**) 19/03/2005, 17:17

vaya, que guapo... si señor...,

el q mas me interesa por el momento es el sencillo,

Código:

<html>
<head>
<title>
	Probador de scripts
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta name="author" content="Pepe Molina" >
<meta name="generator" content="Block de notas" >
<meta name="keywords" content="html" > 
<meta name="description" content"probador para scripts" >

<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script language="javascript" type="text/javascript">
function formatear(mensaje)	{
	return mensaje.split("&lt;").join("<").split("&gt;").join(">").split("&quot;").join("\"");
}

function mostrar()	{
	window.frames.ventana.document.clear();
	window.frames.ventana.document.open();
	window.frames.ventana.document.writeln(document.forms.losMensajes.mensajero.value);
	window.frames.ventana.document.close();
}

</script>
</head>
<body >
<h1 
style="background-image: url(../miemoticon.gif);
padding: 10px auto 40px auto;
text-align: center;
color: blue;
background-repeat: no-repeat;
background-position: 5px 50%;
background-color: #eeeeee">
	Probador de scripts
</h1>
<br />
<p style="text-indent: 1cm">
	El texto que se introduzca en el recuadro superior puede verse en inferior...
</p>
<div align="center">
<form name="losMensajes" >
<textarea name="mensajero" cols=100 rows=10 ></textarea>
<br />
<input type="button" value="mostrar resultado" name="resultado" onclick="mostrar()" />

</form>
<div id="mensajear" style="display: none; text-align: justify;">
</div>
<iframe name="ventana" style="width: 90%; height: 300;"></iframe>
</div>
</body></html>

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
     SymRealOnUnload();
}

function SymOnLoad()
{
  if(SymRealOnLoad != null)
     SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

lo que me gustaria es q al pulsar salte un popup y muestre el iframe, asi podria mostrarlo al 100% de resolucion... si no, no me entra dentro del template... eso es muy complicao... lo de pasar los datos al popup???

programeitor · #10 (**permalink**) 19/03/2005, 17:18

Hola caricatos ,enseguida voy a ver lo que comentas.
nuevo., el tema del retraso es debido a que estoy utilizando el evento onkeypress porque tengo IE ,la verdad no se el porque del retraso ,el evento mas recomendable es onkeyup, que no tiene este retraso ,pero no funciona en IE ,si tienes otro navegador reemplazalo.

Saludos.

nuevo · #11 (**permalink**) 19/03/2005, 17:28

jejej, por el retraso no pasa nada en realidad, ahora lo que me estoy empeñando es en mostrar el resultado en un popup para que pueda visualizarse al 100%,,,

recuerden q lo q metemos en el textarea es HTML, que sera introducido en mysql, y asuvez mostrado como PAGINA en una web...

es para mi proyecto del portal gratuito... un portal dinamico donde cada uno se crea sus secciones con HTML

programeitor · #12 (**permalink**) 19/03/2005, 17:40

Ahora que me doy cuenta ,en realidad donde no funciona onkeyup es en mi editor HTML

,estoy viendo las paginas de caricatos ,ya comentare.

programeitor · #13 (**permalink**) 19/03/2005, 17:50

caricatos ,el editor HTML es solo para html ,no acepta stylos ni scripts, pero esta muy conseguido para su proposito.

Lo que estoy haciendo es casi identico al editor Editor de scripts, va perfectamente en IE ,lo he probado en NS y da el mismo tipo de errores, no reconoce document.frames y da este error tambien:

¡Error: uncaught exception: Permission denied to call method HTMLDocument.clear

¿como demonios hay que hacer para que funcione bien?

nuevo · #14 (**permalink**) 19/03/2005, 20:02

me gusta como funciona... pero esta el problema del espacio dentro de la web..., miren aqui el ejemplo funcionando... y veran lo que digo...

pulsa aqui

aqui el codigo... ahora intento q se abra en un popup pero ya me supera el tema...

gracias a los 2, he avanzado bastante... estoy apunto de conseguirlo... estoy seguro.

Código:

<!-- inicioBloque: blokeThemeEstrucPrincipalCentro -->
<script language="JavaScript">
<!--
	var SymRealOnLoad;
	var SymRealOnUnload;

		function SymOnUnload(){window.open = SymWinOpen;
  			if(SymRealOnUnload != null)
     			SymRealOnUnload();
		}

		function SymOnLoad(){
  			if(SymRealOnLoad != null)
     			SymRealOnLoad();
  				window.open = SymRealWinOpen;
  				SymRealOnUnload = window.onunload;
  				window.onunload = SymOnUnload;
   			}

				SymRealOnLoad = window.onload;
				window.onload = SymOnLoad;

		function SymError(){return true;}
			window.onerror = SymError;
			var SymRealWinOpen = window.open;

		function SymWinOpen(url, name, attributes){return (new Object());}

	window.open = SymWinOpen;


		function storeCaret(text) {if (text.createTextRange) {text.caretPos = document.selection.createRange().duplicate();}}
 		function meter(text) {var postopic = document.PostTopic.varAdminConfigBloquesLinkCode; if (postopic.createTextRange && postopic.caretPos) { var caretPos = postopic.caretPos; caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;}   else postopic.value += text; postopic.focus(caretPos)}

  		function codigo(accion) {
   			switch(accion) {

    			case "url":
     				url = prompt("URL del Enlace", "http://");
     				txt = prompt("TxT del Enlace", "");
     					if(url) {
      						url="<a href="+url+">"+txt+""+"</a>";
      						meter(url);
     					}
     			break;

   				case "form1":
   					form1 = prompt("Texto", "");
    					if(form1) {
      						form1="<table class=\"vedit\" width=\"576\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"><tr><td>"+form1+"</td></tr></table>";
      						meter(form1);
						}
     			break;

   				case "form2":
   					form2 = prompt("Texto", "");
					img = prompt("Imagen", "");
   						if(form2) {
   							form2="<table width=\"576\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td><img src=\""+img+"\" height=\"32\" width=\"32\" border=\"0\"></td><td>"+form2+"</td></tr></table>";
						    meter(form2);
						}
     			break;

    			default:
     				meter(accion);
     			break;
   			}
		}
//-->
</script>

<script language="javascript" type="text/javascript">
	function formatear(mensaje)	{return mensaje.split("&lt;").join("<").split("&gt;").join(">").split("&quot;").join("\"");}

		function mostrar(){
			window.frames.ventana.document.clear();
			window.frames.ventana.document.open();
			window.frames.ventana.document.writeln(document.forms.PostTopic.varAdminConfigBloquesLinkCode.value);
			window.frames.ventana.document.close();
		}
</script>

<form action="index.php?nucleo=adminconfigblocknewok" method="post" name="PostTopic" target="_self">
	<table class="vedit">
		<tr>
		    <th><b>Nombre Bloque</b></th>
		    <td><input type="text" name="varAdminConfigBloquesLinkTitulo" size="45"></td>
		</tr>
		<tr>
		    <th><b>Titulo</b></th>
		    <td><input type="text" name="varAdminConfigBloquesLinkNAme" size="45"></td>
		</tr>
		<tr>
			<th><b>Informacion</b></th>
		<td><input type="text" name="varAdminConfigBloquesLinkInfo" value="" size="45"></td>
		</tr>
		<tr>
			<th><b>Target</b></th>
		<td>
			<select name="varAdminConfigBloquesLinkTarget" size="1" class="hedit">
				<option selected value="_self">_self</option>
				<option value="_self">_self</option>
				<option value="_blank">_blank</option>
			</select>
		</td>
		</tr>
		<tr>
			<th align="center"><input type="button" value="Mostrar" name="resultado" onclick="mostrar()" class="botones"></th>
			<th align="right"><b>Codigo</b></th>
		</tr>
		<tr>
			<th colspan="2"><textarea name="varAdminConfigBloquesLinkCode" rows="14" cols="70" wrap="virtual" id="area" onkeypress="mira()"></textarea></th>
		</tr>
		<tr>
			<th colspan="2">
				<div align="center">
				    <a href="javascript:codigo('form1')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato1.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form2')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato2.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form3')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato3.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form4')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato4.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form5')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato5.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form6')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato6.gif" border="0"></a>&nbsp;
				    <a href="javascript:codigo('form7')"><img src="http://www.rainhosting.net/mym-studio/templates/images/formato/formato7.gif" border="0"></a><br>
					<input type="button" class="botones" value="Url" title="Añadir Enlace" onclick="javascript:codigo('url')">
				</div>
			</th>
		</tr>
	</table>
		<br>
	<input type=submit value=".: Aceptar :." class="botones">&nbsp;<input type="button" value=".: Cancelar :." onclick="history.back(-1)" class="botones"><br>
		<br>
	<iframe style="border:1px black; border-style: dotted" name="ventana" frameborder="0" width="99%" height="100" align="center" marginwidth="0" marginheight="0" scrolling="yes"></iframe>
</form>
<!-- finBloque: blokeThemeEstrucPrincipalCentro -->

caricatos · #15 (**permalink**) 20/03/2005, 02:09

Cita:

Iniciado por programeitor

caricatos ,el editor HTML es solo para html ,no acepta stylos ni scripts, pero esta muy conseguido para su proposito.

Lo que estoy haciendo es casi identico al editor Editor de scripts, va perfectamente en IE ,lo he probado en NS y da el mismo tipo de errores, no reconoce document.frames y da este error tambien:

¡Error: uncaught exception: Permission denied to call method HTMLDocument.clear

¿como demonios hay que hacer para que funcione bien?

Hola otra vez:

programeitor: "frames" tiene que colgar de "window"...

...
Como explorer es "muy suyo" y hace lo que quiere, lo hace colgar también de document, pero tienes que usar "window.frames"...
El código debería ser:

function mostrar() {
window.frames["elFrame"].document.clear();
window.frames["elFrame"].document.open();
window.frames["elFrame"].document.writeln(document.forms["elForm"]["elTextarea"].value);
window.frames["elFrame"].document.close();
}

También se podría poner el contenido del textarea como parámetro.
nuevo: Veo que ya funciona bastante bien. ¡Felicidades!

Saludos

programeitor · #16 (**permalink**) 20/03/2005, 06:22

.

Cierto caricatos, buena aclaracion

.
Sigo teniendo ciertos problemas con Netscape:

1. Si el estilo del body es overflow:hidden no se ve el iframe.

2. Si dentro de ese iframe meto otro iframe, ¿como accedo a el?

- window.iframe[0].iframe[0] ,no va.
- window.iframe[0].window.iframe[0] ,no va.
3. Se ejecuta muy lentamente

, con la barra de progreso como si estuviera cargando una pagina gigante llena de imagenes

.

Bueno, me gustaria hacerlo funcionar

,ya que me parece una herramienta muy interesante ,pero en Nescape todo son pegas ,sin embargo en el odiado IE va como la seda. Que le vamos a hacer.....?

nuevo., la sintaxis de window.open es asi:

window.open('direccion', 'titulo', 'toolbar,menubar,scrollbars,resizable,directories, status,location,copyhistory,fullscreen,width=400,h eight=400')

las opciones que incluyas estaran activas, basta no incluirla para desactivarla.

Saludos.

.

programeitor · #17 (**permalink**) 20/03/2005, 07:02

.

Bueno el mensaje anterior no esta del todo correcto, es que estaba escribiendo el codigo mal ,ponia iframe[] en lugar de frames[]

, asi como iba a funcionar....?

Con lo que en realidad solo me queda un problema menor y otro mayor., el menor es el tema del owerflow:hidden del body, que no lo entiendo

.

Y el mayor es el tema de la velocidad de ejecucion ,muy, muy lento.

Pero bueno ,seamos optimistas

,esto está practicamente solucionado

,a ver si alguien da con la solucion.

Gracias.

.

nuevo · #18 (**permalink**) 20/03/2005, 08:06

no consigo llevar la variable con los datos al popup... y eso?... me sale siempre vacio el iframe

boton -->

Código:

<input type="button" value="Mostrar" name="resultado" onclick="window.open('x.html', 'titulo', 'toolbar,menubar,scrollbars,resizable,directories, status,location,copyhistory,width=400,h eight=400')" class="botones2" title="Ver Como HTML">&nbsp;

popup -->

Código:

<body onload="mostrar()">				
<iframe name="ventana" frameborder="0" width="100%" height="100" align="center" marginwidth="0" marginheight="0" scrolling="yes"></iframe>
</body>

tengo q hacer algo mas...  :pirata:

programeitor · #19 (**permalink**) 20/03/2005, 09:02

.

hola nuevo., a ver si puedo ayudarte es eso.

prueba con lo siguiente:

la funcion que abre el popup:

var popup=window.open('....y tal y tal....')
popup.document.write(lo del textarea)
popup.document.close()

Espero que sea la solucion.

ahora a lo mio

.

Ya está ,solucionado

.

El problema del overflow:hidden del body, puede solucionarse creando una capa que abarque todo el contenido del body, dandole a esta overflow:auto. NS no respeta las medidas dadas y tampoco se puede quitar el overflow a el body principal ,pero esto son problemas menores

.

Referente al problema de la tardanza de la carga.....,caricatos ,

siento no haber dado importancia a la orden
window.frames[0].document.close() al final de la funcion ,esa era la solucion ,con lo que todo arreglado

.

Podeis ver el resultado en http://es.geocities.com/opinionxreflexion/editor.html

Saludos a todos.

.

caricatos · #20 (**permalink**) 20/03/2005, 09:19

Hola otra vez:

A lo dicho por programeitor, falta "abrir" el documento... (tal vez no influya mucho, pero creo que es lo correcto...)

var popup=window.open('....y tal y tal....')
popup.document.open();
popup.document.write(lo del textarea)
popup.document.close()

programeitor: ¿Has probado poner overflow: auto a la capa donde se ubica el iframe... (o en su defecto al elemento que lo contenga)?

Saludos

programeitor · #21 (**permalink**) 20/03/2005, 09:55

Que tal, caricatos.

Poner el open() despues de window.open ,pues como que no hace falta, window.open abre el documento por defecto ,asi lo creo yo ,y ademas no da error. Lo que si hay qe poner, y ahi llevavas la razon., y a ves como ya lo utilizo es el close() al final.

El iframe en principio no esta en una capa ,la pagina esta compuesta por el textarea y el iframe ,no hay capas, no se si metiendo el iframe en una capa se podria solucionar........

pero, ¿que sentido tendria?

Y,si ,al body principal ,es decir la pagina ,...si le pongo overflow:auto me muestra una pagina en blanco

., si le pongo overflow:hidden solo muestra el textarea ., todo esto en Netscape ,no lo entiendo.

Saludos ,caricatos.