Thursday, June 11, 2015

Make a HTML, CSS, JS try it yourself editor.

Making a try it yourself editor is a very easy and 5 minutes task if you know the concept behind it. Here I’m telling you step by step to create a try it yourself editor like w3 schools that would be able to run your HTML, CSS and javascript code online and display the result in iframe.

The idea behind a try it yourself editor is more simpler than your thought. We just create a button, textarea and a iframe on the page and on click event of the button, load the content of textarea to iframe using JavaScript and all is done! So simple, let’s do it…

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Try it yourself editor</title>
<style type="text/css">
textarea, iframe {
    border: 2px solid #ddd;
    height: 500px;
    width: 100%;  
}
  </style>
</head>
 <body>

 <table width="100%" border="0" cellspacing="5" cellpadding="5">
 <tr>
 <td width="50%" scope="col">&nbsp;</td>
 <td width="50%" align="left" scope="col">
 <input onclick="runCode();" type="button" value="Run Code">
 </td>
 </tr>

 <tr>
 <td> 

 <form>
 <strong>Code</strong>

 <textarea name="sourceCode" id="sourceCode">


 <html>
 <head>
 <title>Hello</title>
 </head>

 <body>
 <h1>Hello!</h1>
<p>Write HTML, CSS or JavaScript code here and click 'Run Code'.</p>
 </body>
 </html>
 </textarea>
 </form>
 </td>
<td><strong>Output</strong><iframe name="targetCode" id="targetCode"></iframe></td>
</tr>
</table>  


<script type="text/javascript">
   function runCode(){
   var content = document.getElementById('sourceCode').value;
   var iframe = document.getElementById('targetCode');
   iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
   iframe.document.open();
   iframe.document.write(content);
   iframe.document.close();
   return false;
   }
   runCode();
</script>
</body>
</html>

1 comment: