codemirror5/demo/preview.html at master · codemirror/codemirror5 · GitHub

Name: codemirror5/demo/preview.html at master · codemirror/codemirror5 · GitHub
Rating: 4.4 (2113 reviews)
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
<!doctype html>

<title>CodeMirror: HTML5 preview</title>
<metacharset="utf-8"/>
<linkrel=stylesheethref="../doc/docs.css">

<linkrel=stylesheethref=../lib/codemirror.css>
<scriptsrc=../lib/codemirror.js></script>
<scriptsrc=../mode/xml/xml.js></script>
<scriptsrc=../mode/javascript/javascript.js></script>
<scriptsrc=../mode/css/css.js></script>
<scriptsrc=../mode/htmlmixed/htmlmixed.js></script>
<styletype=text/css>
 .CodeMirror {
float: left;
width:50%;
border:1px solid black;
 }
iframe {
width:49%;
float: left;
height:300px;
border:1px solid black;
border-left:0px;
 }
</style>
<divid=nav>
<ahref="https://codemirror.net/5"><h1>CodeMirror</h1><imgid=logosrc="../doc/logo.png"></a>

<ul>
<li><ahref="../index.html">Home</a>
<li><ahref="../doc/manual.html">Manual</a>
<li><ahref="https://github.com/codemirror/codemirror5">Code</a>
</ul>
<ul>
<li><aclass=activehref="#">HTML5 preview</a>
</ul>
</div>

<article>
<h2>HTML5 preview</h2>

<textareaid=codename=code>
<!doctype html>
<html>
<head>
<metacharset=utf-8>
<title>HTML5 canvas demo</title>
<style>p {font-family: monospace;}</style>
</head>
<body>
<p>Canvas pane goes here:</p>
<canvasid=panewidth=300height=200></canvas>
<script>
varcanvas=document.getElementById('pane');
varcontext=canvas.getContext('2d');

context.fillStyle='rgb(250,0,0)';
context.fillRect(10,10,55,50);

context.fillStyle='rgba(0, 0, 250, 0.5)';
context.fillRect(30,30,55,50);
</script>
</body>
</html></textarea>
<iframeid=preview></iframe>
<script>
vardelay;
// Initialize CodeMirror editor with a nice html5 canvas demo.
vareditor=CodeMirror.fromTextArea(document.getElementById('code'),{
mode: 'text/html'
});
editor.on("change",function(){
clearTimeout(delay);
delay=setTimeout(updatePreview,300);
});

functionupdatePreview(){
varpreviewFrame=document.getElementById('preview');
varpreview=previewFrame.contentDocument||previewFrame.contentWindow.document;
preview.open();
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview,300);
</script>
</article>