Cómo crear un editor de JavaScript "Pruébelo usted mismo"

Sé que hay una serie de editores de JavaScript "Pruébelo usted mismo", como W3School's Try It editor, JSBin y JSFiddle.Cómo crear un editor de JavaScript "Pruébelo usted mismo"

Estoy desarrollando una biblioteca gráfica de JavaScript que me gustaría que la gente pruebe desde mi propio sitio (una diferencia con respecto a otros editores es que mi resultado sería un lienzo, no un marco HTML). Sin querer reinventar la rueda, ¿existen formas establecidas para crear una capacidad de "Pruébelo usted mismo" que considere problemas como vulnerabilidades de scripting basadas en DOM?

Fuente

2012-01-09 David Koelle

JSFiddle simplemente toma el HTML, CSS y JavaScript que usted proporciona y lo carga en un iFrame. –

Similar en el sentido de que habla sobre los editores Try-It, pero no llega al desarrollo de dicho editor: http://stackoverflow.com/questions/2814453/javascript-online-try-it-editor, http: // stackoverflow.com/questions/2114160/how-to-create-a-online-javascript-editor –

¿De qué vulnerabilidades te preocupa? ¿No es esencialmente lo mismo que el usuario que tiene abierta la consola de depuración? (¡Aunque tal vez me he perdido algo!) –

Un diseño simple sería una página de inicio con form que contiene tres textarea y uno iframe. Los textarea 's contienen el código HTML/CSS y Javascript partes, y la iframe contiene el resultado:

<!--index.html--> 
<html> 
<form method="post" action="tryit-result.php" target="result"> 
<button>Try it</button> 
<table> 
    <tr> 
     <td><textarea name="html"></textarea></td> 
     <td><textarea name="css"></textarea></td> 
    </tr> 
    <tr> 
     <td><textarea name="js"></textarea></td> 
     <td><iframe src="tryit-result.php" name="result"></iframe></td> 
    </tr> 
</table> 
</form> 
</html>

El presentar a continuación, se maneja en el servidor por el ahorro de los HTML/CSS/scripts en un archivo y luego regresar una página que hace referencia a estos archivos, algo en la línea de:

<!--tryit-result.php--> 
<html> 
<head> 
    <style type='text/css'> 
     <?php echo file_get_contents('css contents')?> 
    </style> 
    <script type='text/javascript'> 
    $(function() { 
     <?php echo file_get_contents('js contents')?> 
    }); 
    </script> 
</head> 
<body> 
    <?php echo file_get_contents('html contents')?> 
</body> 
</html>

Fuente

2012-01-11 13:36:48 eolsson

¿Es seguro usar este código? ¡Tal vez el usuario ingrese algo para bloquear el servidor! –

Crear una simple página html con área de texto y de marco flotante en primer lugar:

<html> 
    <head> 
<script type="text/javascript"> 
function data_submit() 
{ 
document.form1.txt_data.value= document.form1.txt_html.value; 
} 
</script> 

    <title>Try It yourself Online Editor</title> 
</head> 
    <body> 
    <form name="form1" id="form1" method="post" action="" > 
<table width="100%" cellspacing="0" cellpadding="0" border="1"> 
    <tr > 

    <td> 
<input type="submit" name="bt_submit" value="Click to Execute " align="top" onClick="data_submit();"/> 
</td> 
     <td align="center">Output</td> 
    </tr> 
     <tr> 
     <td width="50%" > 
     <input type="text" name="txt_data" value="" style="visibility:hidden;" /> 

     <textarea rows="35" width="90px" height="550px" cols="77" name="txt_html"> 

    </textarea> 
      </td> 
     <td width="50%" style="border-width:10px;border-style:none;"> 
      <iframe height="550px" width="100%" src="try_it.php" name="iframe_a"></iframe> 
     </td> 
    </table> 
    </form> 
    </body> 
    </html>

Ahora c La oda escrita por el usuario debe mostrarse en el iframe, por lo que debemos almacenar el código en un archivo. Escribe código PHP para crear un archivo. siguiente es el código crear un archivo.

if(isset($_POST['bt_submit'])) 
{ 
$file = "try_it.php"; 
$fp = fopen($file, 'w'); 
//Following code will store the content in textarea in a variable which will create a file. 
$content = $_POST['txt_data']; 
fwrite($fp, $content); 
    fclose($fp); 
    } 
?>

siguiente código PHP está escrito para mostrar una salida por defecto y cambió de salida después del botón de envío se hace clic en el usuario.

<?php 


if(isset($_POST['bt_submit'])) 
{ 
echo trim($content); 
    } 
    else 
    { 
    echo "<html>\n"; 
echo "<body>\n"; 


echo "<h1>Hello World!!!</h1>\n"; 


echo "</body>\n"; 
echo "</html>\n"; 
} ?>

Ahora combina todo el código y obtendrás un simple editor de prueba tú mismo.

Fuente

2012-07-06 10:46:43 Avson1023

Este No requiere 2 archivos en todos de hecho esto se puede hacer muy fácilmente: Por simplicidad im sólo la creación de una única área de texto pero se pueden crear 3 área de texto si usted quiere y añadir prefijos tales como <estilo> o < guión > etc

<body> 
    <textarea id="code" oninput="putcode(this.value)"> 
    </textarea> 
    <iframe frameborder="0"></iframe> 
    <script> 
    var val; 
    function putcode(val){ 
     document.querySelector("iframe").srcdoc=val; 
    } 
    </script> 
</body>

puede añadir más código CSS para que sea más bonito, pero esto es bastante una versión básica de lo que estoy tratando de explain.and no hay necesidad de preocuparse por la seguridad, ya que es perfectamente seguro.

Fuente

2016-06-19 08:12:23

Si está en el medio de escribir algo en el área de texto "código", ¿esto cargaría JavaScript incorrecto en el iframe, y eso es un problema? –

¿Qué quiere decir con javascript incorrecto? Todo lo que escriba en el área de texto estará visible en el iframe y se tratará como una página completamente diferente. –

Cómo crear un editor de JavaScript "Pruébelo usted mismo"

Respuesta

Cuestiones relacionadas