angularjs - 使用 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 。