从Plunker / StackBlitz嵌入式代码编辑器发送和获取数据 [英] Send and Get data from code editor like Plunker/StackBlitz embedded

问题描述

我在.Net Core 2和Angular 6中有一个网站。
我正在尝试使用angular或javaScript创建一个代码编辑器，它将与网站的一部分进行交互，从父级到嵌入式方向，而不是相反一旦完成，这段代码就可以提交给我的服务器了。可以是喜欢 jsfiddle ， jsbin 等的任何其他编辑器......

所以我对图像很难下面。
我想在我的网站上嵌入类似于

编辑：

另一种可能的解决方案可能是stackblitz，它可以连接到github。

先决条件：用户需要有一个github帐户，让我知道它的地址是什么。

所以我可以加载嵌入式 stackblitz 可以执行的操作：

1. 从github加载角度代码（它可以根据他们的API）


2. 从stackblitz通过github API提交，如果可能的话？如果是，如何？


3. 据我所知，可以从父页面到iframe进行通信，因此stackblitz可以从理论上获取该事件的数据。

如果可能的第1点和第2点是否有任何实例？

解决方案

Stackblitz肯定更好。

分步骤：

1. 你需要创建一个NPM包，而不仅仅是git存储库


2. 你需要设置一个带有POST / PUT / PATCH资源的API，允许外部头文件;然而，这肯定是不安全的，你需要激活SSL


3. 如同在步骤2中使用GET

这里的示例。

如果你不知道如何嵌入，他们有一个文档。

I have a website in .Net Core 2 and Angular 6. I am trying to create a code editor in angular or javaScript that will interact with part of the website, from parent to embeded direction, not the opposite and this code can be submitted to my server once it is done. Can be any other editor that like jsfiddle, jsbin, etc...

So I tough about the image below. I would like to embed something similar to Plunker Editor on my website and in this page there will be events that will be sent to this embeded plunker, I believe is an iframe. Also I would like to know if the plunker can submit the code that now it is possible to download manually by creating some button internally and sending it through the web.

PS: Sorry, is written splunk on the draw below, but I meant plunker.

Is it possible to have something like this. If yes, How?

EDIT:

Another possible solution may be stackblitz, it has the capability to connect to github.

Pre-requisite: The user would need to have a github account and let me know what is it's address.

So I could load the load the stackblitz embedded could do:

1. Load angular code from github (It's possible according with their API)
2. Commit from stackblitz through github API, if is it possible? If yes how?
3. It's possible to communicate from parent page to iframe as far as I know, so stackblitz could get data from that event in theory.

If the point 1 and 2 is possible is there any live example ?

解决方案

Definitely better Stackblitz.

Going by steps:

1. You need to create an NPM package, rather than just git repository
2. You need to setup an API with POST/PUT/PATCH resource, allowing external headers; however this is definitely something not secure and you'll need SSL activated
3. As in step 2 but with GET

Here an example.

If you dont know how to embed, they have a documentation.

这篇关于从Plunker / StackBlitz嵌入式代码编辑器发送和获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！