simpleWebEditor/index.htm at master · Ataurr/simpleWebEditor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<!--Bhaskar Tiwari-->
<html>
<head>
	<meta charset="utf-8">
	<title>Web Editor</title>
</head>
	<body>
		<table>
			<tr>
				<td>
					<div class="tag">HTML (Body)</div>
					<div id="html" class="content" contenteditable></div>
				</td>
				<td>
					<div class="tag">CSS</div>
					<div id="css" class="content" contenteditable></div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="tag">JavaScript</div>
					<div id="js" class="content" contenteditable></div>
				</td>
				<td>
					<div class="tag">Output</div>
					<iframe id="output"></iframe>
				</td>
			</tr>
		</table>
	</body>
</html>
<script>
window.onload=function(){
	var html=document.getElementById("html"),
		css=document.getElementById("css"),
		js=document.getElementById("js"),
		output=document.getElementById("output"),
		working=false,
		fill=function(){
			if(working){
				return false;
			}
			working=true;
			var document=output.contentDocument,
				style=document.createElement("style"),
				script=document.createElement("script");
			document.body.innerHTML=html.textContent;
			style.innerHTML=css.textContent.replace(/\s/g,"");
			script.innerHTML=js.textContent;
			document.body.appendChild(style);
			document.body.appendChild(script);
			working=false;
		};
	html.onkeyup=fill;
	css.onkeyup=fill;
	js.onkeyup=fill;
}
</script>
<style>
html,body,table,div.content,iframe{
	border:0;
	height:100%;
	margin:0;
	padding:0;
	width:100%;
}
td{
	border:2px solid black;
	height:50%;
	padding:25px 5px 5px 5px;
	position:relative;
	vertical-align:top;
	width:50%;
}
div.tag{
	position:absolute;
	right:5px;
	top:5px;
}
</style>