compile html code from input

if I have a code from an input (the user writes). something like that:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>New Webpage</title>

    </head>

    <body>

      more html code

    </body>

</html>

how can I compile this and add this to my web page in p5.js?

Answers

  • edited May 2016

    That's an ".html" file which any browser understands the way it is.
    Here's 1 w/ a complete p5.js JS sketch. You can drag the file onto any Firefox-based browser to run it.
    You can see it online here too: http://p5js.SketchPad.cc/sp/pad/view/ro.CYTkHWj9smgw8Q/latest
    Drag & drop any image file in order to show up in browser: :D

    <script src=http://p5js.org/js/p5.min.js> defer</script>
    <script src=http://p5js.org/js/p5.dom.js defer></script>
    
    <script>
    
    /**
     * Image Drop (v2.0)
     * GoToLoop (2015-Nov-25)
     *
     * forum.Processing.org/two/discussion/13650/
     * dropped-image-not-showing-in-the-draw-loop-gotfile-createimg-image
     *
     * p5js.SketchPad.cc/sp/pad/view/ro.CYTkHWj9smgw8Q/latest
     */
     
    var img;
     
    function setup() {
      createCanvas(800, 600).drop(gotFile);
      noStroke().fill(0xff).frameRate(10).noLoop();
      textSize(24).textAlign(CENTER);
    }
     
    function draw() {
      background(0200);
      if (img)  image(img, 0, 0, width, height);
      else      text('Drag an image file onto the canvas.', width>>1, height>>1);
    }
     
    function gotFile(f) {
      if (f.type == 'image')  img = loadImage(f.data, redraw);
      else                    println('Not an image file!');
    }
    
    </script>
    
  • compile html code from input

    The simple answer is this is an incredibly bad idea and a massive security risk. You would need to parse and sanitise all HTML input to ensure they weren't injecting potentially 'dangerous' tags - like script tags or iframes.

    Yo might be better off accepting input in a format like markdown and parsing that to HTML: it's easier for users to learn and easier to control/sanitise input... And there are already a lot of libraries out there to support it.

Sign In or Register to comment.