How to apply information submitted in Code Mirror? [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve this question

I am looking to build a personal code playground. Basically I am looking to make 3 Code Mirror text areas for HTML, CSS and JS, Basically I am puzzled on how to make a result box. Any help would be appreciated... Thanks :)

Just to clarify I am looking for a way (I am aware of iFrames) to submit code from 3 "CodeMirrors" and then gets applied to a result area below. I am also looking for pointers as to how todo this as I have only been coding 6 months.

Answer 1

Approach 1 - using iframes:

It's the approach used by jsfiddle. Create 3 textareas to put your code (html, javascript, css). When the user press a button, you can send an ajax request to the server, sending the 3 texts, in order to generate a temporary page that is the composition of the various parts and returning its URL. Then create an iframe that points to it (or update the src of an existing one).

It's quite simple.

Approach 2 - client side:

You can append both the html, css and js in the actual page. It's quite simple, but can generate various issues with conflicting styles, ids and javascript functions/variables names (that you must manage manually).