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.
<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"> </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>
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"> </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>
