<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Editor</title>
</head>
<body>
<style>
html{
height: 100%;
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
margin: 0;
}
textarea{
padding: 10px;
resize: none;
width: calc( 100% - 20px );
height: 70%;
margin: 0;
border: 0;
}
textarea:focus{
outline: none;
}
iframe{
margin: 0;
border: 0;
height: 50%;
}
.controls{
border-top : 1px solid #808080;
border-bottom: 1px solid #808080;
padding: 10px;
white-space: nowrap;
overflow-x: auto;
min-height: 23px;
}
.controls a, .controls label{
text-decoration: none;
color: #000000;
user-select: none;
padding: 8px;
cursor: pointer;
}
.controls a:hover, .controls label:hover{
background: #f0f0f0;
}
</style>
<textarea id=data>
<!doctype html>
<html>
<body>
<style>
body {padding: 50px;
}
span {
display: inline-block;
background: #a0ffa0;
padding: 20px;
}
</style>
<span>
Edit the page on top, see
the result on the bottom.
</span>
</body>
</html>
</textarea>
<div class=controls>
<label>
<input type=checkbox id=realtime onclick="update()" checked>
realtime
</label> |
<a href=# onClick="update()">update</a> |
<a href=# onClick="goFullscreen(false)">fullscreen</a> |
<a href=# onClick="goFullscreen(true)" >new fullscreen</a> |
</div>
<iframe name=hello style="width: 100%; height: 100%"></iframe>
<script>
function update(){
let outty = window.hello.document;
outty.open();
let inny=document.getElementById("data");
outty.write(inny.value);
outty.close();
};
function goFullscreen(newWin){
if (newWin) outWin= window.open()
else outWin= window.open("about:blank","html_editor");
outWin.focus();
let outty = outWin.document;
outty.open();
let inny=document.getElementById("data");
outty.write(inny.value);
outty.close();
}
function realtime(){
if (!document.querySelector("#realtime").checked) return;
update();
}
dataArea=document.getElementById("data");
dataArea.onkeyup=realtime;
update();
</script>
</body>
</html>
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115