script tag, the CSS in a
style tag, and the HTML in the
body tag, load it all in and voila we're done.
var result = "string"; var iframe = document.getElementById('iframe'); if(iframe.contentDocument) doc = iframe.contentDocument; else if(iframe.contentWindow) doc = iframe.contentWindow.document; else doc = iframe.document; doc.open(); doc.writeln(result); doc.close();
Now that we know how to insert a string you can imagine it starts becoming quite simple as we can build that string up anyway we like. Here is a basic version of what it looks like to get everything working properly. The one thing to note here is the placement of the
Adding a custom framework, libraries, themes or anything is simple as we just build it into the string just like we would a regular web page.
It's probably a good idea to only add one library at a time like jQuery or Prototype.js for example. You can pretty much add all the libraries you like though and it can be done easily using the Google libraries API as your source.
The rest of the code is pretty much just eye candy and some server side stuff to save the fiddles. I will outline the other pieces of the JSFiddle code, which maybe I will add some day if I'm not lazy.
This is where the server side part comes in. But all we're doing here is saving and retrieving strings from the server. For a fork we duplicate the record, for an update we increment a version number, can't get much easier than that.
One last piece to add would be a syntax highlighter for the code boxes. There are plenty out there and it wouldn't be too difficult to intergrate one of them. Also we would probably also need to add some key press handlers for the tab button to give us nice tab indents rather than switching to another portion of the page.
That pretty much covers it, sometimes it really is quite amazing how much you can accomplish with so little code and it shows you that creativity and ingenuity is just as important as being a solid developer when it comes to ideas.