David Koelle David Koelle - 1 year ago 123
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 Source

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:

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

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:

    <style type='text/css'>
        <?php echo file_get_contents('css contents')?>
    <script type='text/javascript'>
    $(function() {
        <?php echo file_get_contents('js contents')?>
    <?php echo file_get_contents('html contents')?>