Apnapedia Share Your Stories With The World!
In this website I have started to teach people html, so I write some post by explaining different tags and some other things but at the same time it is very necessary for you me to make a html online editor there. So that I decided to do it, for this purpose I have searched many places to find out the best html reader, but I could not find it. Honestly I received some editors but did not work well as creating issues like coloring, no proper alignments and not sporting all tags even some necessary tags were being missed.
Then I decided to try it myself with the help of codes what I had got from different places. Finally I got successes to create a very simple even it supports all tags and we can you it without internet connection. Moreover it sports html, JavaScript, css at the same time that is I decided to distribute with you.
Under are some simple steps to used this try it editor for you self;
- Copy this all code and paste in your Notepad
- Save by giving name like “myeditor.html”
- Open your save file with browser
Online Editor Script:
<!DOCTYPE HTML>
<html>
<head>
<style> textarea, iframe
{
border:2px solid #400040;
height:600px;
width:100%;
}
</style>
</head>
<body><table border="2" width="100%" height="100%"> <tr bgcolor="#efdfff"><th>
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="50%" scope="col"> </td>
<td width="50%" scope="col" align="left">
<center><input onclick="runCode();" type="button" value= "Run Code!"></center>
</td>
</tr>
<td>
<form>
<center><b>Paste Your Code here!</b></center>
<textarea name="sourceCode" id="sourceCode">
<html>
<head> <title>My Codes</title> </head>
<body>
<h1> Welcome Coders!</h1>
<p> Write HTML, Javascript or CSS here & click run code!</p>
</body>
</html>
</textarea>
</form>
</td>
<td><b><center>Output</b></center>
<iframe name="targetCode" id="targetCode"> </iframe> </td>
</table>
<script>
function runCode() {
var content = document.getElementById('sourceCode').value;
var iframe = document.getElementById('targetCode');
iframe = (iframe.contentWindow)?iframe.contentWindow:(iframe.contentDocument)? iframe.contentDocument.document:
iframe.contentDocument;
iframe.document.open();
iframe.document.write(content);
iframe.document.close();
return false;
}
runCode();
</script>
</tr>
</th>
</table>
</body>
</html>
If you have any problem related to this code or you want any of more improvment, just put in comment section thanks.