[Resuelto] Ayuda para saber crear un compilador html online

[dato000]

Mi pregunta es simple, como una curiosidad, no se la verdad como debo buscarlo, intente por Iframes, pero eso no resuelve la duda.

Amigos, ayudenme a resolver la siguiente cuestión, como puedo realizar un formulario en el que introduciendo codigo html (dejemoslo simple) en un cuadro/tabla/iframe, se pueda ver el resultado en vivo en otro cuadro/tabla/iframe, visualizando la página.

Es como hacer un compilador online, pero por más que busco de esta manera no veo alguna parte donde pueda aprender a realizar esto.

El ejemplo perfecto, simple y práctico es este: http://www.htmlya.com.ar/simulador/simulador.php?inicio=32&cod=126&punto=46

Excelente simulador, trabaja muy bien.

Alguien sabe como hacerlo, o en donde puedo o como buscarlo??
Siempre he tenido la curiosidad, y hace tanto tiempo que no vengo por aqui que la verdad no se si ya lo pregunte, pero me nacieron las ganas de aprender a aprender.

[ivancea96]

Ejemplo: http://ivancea.hol.es/HTMLparser.php

Código:

Código (javascript) [Seleccionar] Expandir

function show(){
    var ifr = document.getElementById("ifr");
    ifr.contentWindow.document.open('text/html','replace');
    var text = document.getElementById("text").value;
    ifr.contentWindow.document.write(text);
    ifr.contentWindow.document.close();
}

Siendo "ifr" el id del iframe, y "text" el id del textarea del HTML.

[engel lex]

no sería un compilador, porque html no es compilado... sería un interprete...


otra opción tambien es que puedes colocar un textarea y un iframe, y usando jquery solo lee el textarea y colocalo como el HTML del div

es decir

Código (javascript) [Seleccionar] Expandir

//dentro de tu función
var insertar = $("#id_del_textarea").val();
$("#id_de_tu_frame").html(insertar)


[dato000]

no sería un compilador, porque html no es compilado... sería un interprete...

Uyyyyyyyy claro perdona perdona, mea culpa, pequeño detalle, bueno al final se entendia lo que queria decir

Ejemplo: http://ivancea.hol.es/HTMLparser.php

Código:

Código (javascript) [Seleccionar] Expandir

function show(){
    var ifr = document.getElementById("ifr");
    ifr.contentWindow.document.open('text/html','replace');
    var text = document.getElementById("text").value;
    ifr.contentWindow.document.write(text);
    ifr.contentWindow.document.close();
}

Siendo "ifr" el id del iframe, y "text" el id del textarea del HTML.

otra opción tambien es que puedes colocar un textarea y un iframe, y usando jquery solo lee el textarea y colocalo como el HTML del div

es decir

Código (javascript) [Seleccionar] Expandir

//dentro de tu función
var insertar = $("#id_del_textarea").val();
$("#id_de_tu_frame").html(insertar)


Ahhhh vale entonces es con javascript, saben en donde puedo encontrar info al respecto, el HTMLparser funciona de perlas, pero para no tener que leerme la bibla de javascript que tengo (mucho trabajo y cosas pendientes) me pueden echar una mano con la wiki para aprender un poco de esto?? jquery bueno sere honesto, lo he usado poco, así que siendo consiente del potencial y versatilidad de javascript, tiene mucho como para manejar todo.

Gracias de verdad ques si.

[ivancea96]

http://www.w3schools.com/js/default.asp

[MinusFour]

https://jsfiddle.net/hh5e91ux/1/embedded/result/

Como editor no lo recomendaría:

https://jsfiddle.net/hh5e91ux/1/

[dato000]

http://www.w3schools.com/js/default.asp

En serio de ahi aprendiste todo, el contenido esta un poco crudo, no me parece bien explicado para un novato, ahi me defiendo, pero honestamente lo recomiendas para aprendizaje, me parece más que es como referencia, al menos siempre he considerado esa página como referencia para html y css, en fin, agradezco el aporte, de verdad.

Y sobre los ejemplos, me di un buen rato analizando y divirtiendome, no se, pero estoy perplejo al ver que algo que se me hacia tan raro y difuso resultara ser tan simple, es que realmente no le he metido mucho a javascript, no más miren:



especificamente, alguien podria decirme en palabras coloquiales que realiza esta funcion, estoy muy acostumbrado a otro tipo de funciones así que necesitaria una asesoria con esto:

Código (javascript) [Seleccionar] Expandir


function show(){
        var ifr = document.getElementById("ifr");
        ifr.contentWindow.document.open('text/html','replace');
        var text = document.getElementById("text").value;
        ifr.contentWindow.document.write(text);
        ifr.contentWindow.document.close();
        }

especificamente con

Código (javascript) [Seleccionar] Expandir

ifr.contentWindow.document.open('text/html','replace');

Es donde se ejecuta el cambio, claro, hace una transición en el que toma todo el texto tipo html y lo interpreta de acuerdo a ese estandar, verdad? pero digamos los metodos que encapsula dentro del elemento ifr que significan??

[ivancea96]

ifr es el iframe. Tiene sus métodos.

http://www.w3schools.com/js/default.asp
Esa web es uno de los tutoriales. W3Schools, además de referencia, tiene tutoriales.
Y no, yo no aprendí con esa web. Yo aprendí leyendo páginas webs.

[dato000]

ifr es el iframe. Tiene sus métodos.

http://www.w3schools.com/js/default.asp
Esa web es uno de los tutoriales. W3Schools, además de referencia, tiene tutoriales.
Y no, yo no aprendí con esa web. Yo aprendí leyendo páginas webs.

Bueno pero no enojes  yo solo preguntaba.

[50l3r]

Una manera mas actual sería utilizando angularjs. Usando ng-views