mini Code Editor Online
Demo: http://xem.github.com/miniCodeEditor/ Github: https://github.com/xem/miniCodeEditor
Size: 130 bytes.
This function injects HTML, CSS and JS code snippets (typed in three textareas) inside an iframe, and refreshes it. It can be part of a more complete code editor (see demo)
| /* function "update iframe" */ | |
| function u(h, // HTML textarea | |
| c, // CSS textarea | |
| j, // JS textarea | |
| r) // rendering iframe | |
| { | |
| r.src = ""; // empty the iframe | |
| r = r.contentWindow.document; // use r to refer to the iframe's document object | |
| r.write(h.value // start writing HTML in the iframe | |
| + "<script>" // open a script tag | |
| + j.value // write JS code | |
| + " <\/script><style>" // close script tag, open style tag | |
| + c.value); // write CSS code | |
| r.close() // stop writing in iframe (style tag auto closes) | |
| } |
| function u(h,c,j,r){r.src="";r=r.contentWindow.document;r.write(h.value+"<script>"+j.value+"<\/script><style>"+c.value);r.close()} |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
| 0. You just DO WHAT THE FUCK YOU WANT TO. |
| { | |
| "name": "miniCodeEditor", | |
| "description": "inject HTML, CSS and JS code inside an iframe, and refresh it", | |
| "keywords": [ | |
| "html", | |
| "css", | |
| "js", | |
| "iframe", | |
| "editor" | |
| ] | |
| } |
| <!DOCTYPE html> | |
| <title>Foo</title> | |
| <div>Expected value: <b>see demo on <a href="http://xem.github.com/miniCodeEditor/">http://xem.github.com/miniCodeEditor/</a></b></div> | |
| <div>Actual value: <b id="ret">see demo on <a href="http://xem.github.com/miniCodeEditor/">http://xem.github.com/miniCodeEditor/</a></b></div> | |
| <script> | |
| // write a small example that shows off the API for your example | |
| // and tests it in one fell swoop. | |
| var myFunction = function(h,c,j,r){r.src="";r=r.contentWindow.document;r.write(h.value+"<script>"+j.value+"<\/script><style>"+c.value);r.close()} | |
| document.getElementById( "ret" ).innerHTML = myFunction() | |
| </script> |