David Koelle David Koelle - 6 months ago 47
Javascript Question

How to create a JavaScript "Try It Yourself" Editor

I know there are a number of "Try It Yourself" JavaScript editors, such as W3School's Try It editor, JSBin, and JSFiddle.

I'm developing a graphical JavaScript library that I'd like to let people try out from my own site (one difference from other editors is that my output would be to a canvas, not an HTML frame). Not wanting to reinvent the wheel, are there established ways for creating a "Try It Yourself" capability that consider issues like DOM-based scripting vulnerabilities?

Answer

A simple design would be a start page with a form containing three textarea's and one iframe. The textarea's contain the html/css and javascript parts, and the iframe contains the result:

<!--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>

The submit is then handled at the server by saving the html/css/scripts to file and then returning a page that references these files, something in the line of:

<!--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>