SHOW:
|
|
- or go back to the newest paste.
1 | <html> | |
2 | <head> | |
3 | <title>Real Time Editor</title> | |
4 | <script> | |
5 | function refresh(){ | |
6 | var textContent = document.getElementById('editor-textarea').value; | |
7 | document.getElementById('viewer').srcdoc = textContent; | |
8 | } | |
9 | </script> | |
10 | ||
11 | <style> | |
12 | * { | |
13 | margin: 0; | |
14 | padding: 0; | |
15 | } | |
16 | .main { | |
17 | background: #bdc3c7; | |
18 | width: 100%; | |
19 | height: 100%; | |
20 | display: inline-flex; | |
21 | } | |
22 | #editor-textarea { | |
23 | height: 95%; | |
24 | width: 100%; | |
25 | margin: 10px; | |
26 | padding: 5px; | |
27 | } | |
28 | #viewer { | |
29 | background: #fff; | |
30 | border: none; | |
31 | width: 100%; | |
32 | height: 95%; | |
33 | margin: 10px; | |
34 | border: 1px solid #3498db; | |
35 | } | |
36 | </style> | |
37 | </head> | |
38 | <body> | |
39 | <div class="main"> | |
40 | <textarea id="editor-textarea" onkeyup="refresh()"></textarea> | |
41 | <iframe id="viewer"></iframe> | |
42 | </div> | |
43 | </body> | |
44 | </html> |