Send and Get data from code editor like Plunker/StackBlitz embedded

Question

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 ?

Bolin

are you able to show result of your code in iframe just like plunker/stalkbitz?, because i guess this the tricky part, sending code to the server is just post call which you can do easily. – Stormie

Answer 1

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.

Conformity

I see that the first step is possible to be made using cli, but is it possible to publish from Stackblitz to NPM website? – Bolin

NPM is not a website. – Conformity

I know, but it's published usually on npmjs website, where it's the repo, like in here. docs.npmjs.com/getting-started/publishing-npm-packages How to publish it locally and from stackBlitz? – Bolin

npm website is displaying the packages with repositories and stats. Why would you like to publish from stackBlitz? One requires bash to send files including git, while the other one is a runtime editor. Are 2 completely different tools. – Conformity