Using the openPlunkr feature

Question

On Angular.js’s developer Guide most examples has this cool feature that you can press a button ”Edit in Plunker” which will post all files to Plunker and open a new private Plunk using these files. I am using a HTML-5 presentation tool, and this could be a cool feature to add to my slides. I have tried to build a simple example inspired by what I have found on Angular.org, but have failed given my current Angular skills. I’m looking for a simple “getting” started example, either using the strategy used by Angular.org (openPlunkr), JQuery or something similar.

It might help to see how it is done in angular docs: https://github.com/angular/angular.js/blob/master/docs/app/src/examples.js — runTarm, Aug 07 '14 at 16:30

score 0 · Accepted Answer · edited May 23 '17 at 12:29

This feature works by making POST requests to http://plnkr.co/edit/ where the payload has the following format:

{
  "description": "Plunk description", // Optional
  "tags": ["tag1", "tag2", ..., "tagN"], // Optional
  "files": {
    "filename1.ext": "contents of filename1.ext",
    "filename2.ext": "and so on.."
  }
}

Code for this server-side handler: https://github.com/filearts/plunker_www/blob/0c608ae80ef30d59bfdfeaf3c2a28563f7b730e4/app.coffee#L105-L121

If you are using jQuery, you can dynamically create a form and submit that with target="_blank" to open a Plunk in a new window. See https://stackoverflow.com/a/16521510/3753599 for further details on creating a form dynamically.

Using the openPlunkr feature

1 Answers1