使用openPlunkr功能

Question

在Angular.js的开发人员指南中，大多数示例都有这个很酷的功能，你可以按下“在plunker中编辑”按钮，它会将所有文件发布到Plunker并使用这些文件打开一个新的私人Plunk。 我正在使用HTML-5演示工具，这可能是一个很酷的功能，可以添加到我的幻灯片中。我试图建立一个简单的例子，这个例子的灵感来自我在Angular.org上发现的，但是由于我目前的Angular技能而失败了。 我正在寻找一个简单的“获取”开始的例子，要么使用Angular.org（openPlunkr）使用的策略，JQuery或类似的东西。

Answer 1

此功能的工作原理是向POST发送http://plnkr.co/edit/请求，其中有效负载的格式如下：

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

此服务器端处理程序的代码：https://github.com/filearts/plunker_www/blob/0c608ae80ef30d59bfdfeaf3c2a28563f7b730e4/app.coffee#L105-L121

如果您使用的是jQuery，则可以动态创建表单并使用target="_blank"提交该表单以在新窗口中打开Plunk。有关动态创建表单的详细信息，请参阅https://stackoverflow.com/a/16521510/3753599。