Mercurial
comparison .cms/lib/codemirror/demo/preview.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
1 <!doctype html> | |
2 | |
3 <title>CodeMirror: HTML5 preview</title> | |
4 <meta charset="utf-8"/> | |
5 <link rel=stylesheet href="../doc/docs.css"> | |
6 | |
7 <link rel=stylesheet href=../lib/codemirror.css> | |
8 <script src=../lib/codemirror.js></script> | |
9 <script src=../mode/xml/xml.js></script> | |
10 <script src=../mode/javascript/javascript.js></script> | |
11 <script src=../mode/css/css.js></script> | |
12 <script src=../mode/htmlmixed/htmlmixed.js></script> | |
13 <style type=text/css> | |
14 .CodeMirror { | |
15 float: left; | |
16 width: 50%; | |
17 border: 1px solid black; | |
18 } | |
19 iframe { | |
20 width: 49%; | |
21 float: left; | |
22 height: 300px; | |
23 border: 1px solid black; | |
24 border-left: 0px; | |
25 } | |
26 </style> | |
27 <div id=nav> | |
28 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> | |
29 | |
30 <ul> | |
31 <li><a href="../index.html">Home</a> | |
32 <li><a href="../doc/manual.html">Manual</a> | |
33 <li><a href="https://github.com/codemirror/codemirror5">Code</a> | |
34 </ul> | |
35 <ul> | |
36 <li><a class=active href="#">HTML5 preview</a> | |
37 </ul> | |
38 </div> | |
39 | |
40 <article> | |
41 <h2>HTML5 preview</h2> | |
42 | |
43 <textarea id=code name=code> | |
44 <!doctype html> | |
45 <html> | |
46 <head> | |
47 <meta charset=utf-8> | |
48 <title>HTML5 canvas demo</title> | |
49 <style>p {font-family: monospace;}</style> | |
50 </head> | |
51 <body> | |
52 <p>Canvas pane goes here:</p> | |
53 <canvas id=pane width=300 height=200></canvas> | |
54 <script> | |
55 var canvas = document.getElementById('pane'); | |
56 var context = canvas.getContext('2d'); | |
57 | |
58 context.fillStyle = 'rgb(250,0,0)'; | |
59 context.fillRect(10, 10, 55, 50); | |
60 | |
61 context.fillStyle = 'rgba(0, 0, 250, 0.5)'; | |
62 context.fillRect(30, 30, 55, 50); | |
63 </script> | |
64 </body> | |
65 </html></textarea> | |
66 <iframe id=preview></iframe> | |
67 <script> | |
68 var delay; | |
69 // Initialize CodeMirror editor with a nice html5 canvas demo. | |
70 var editor = CodeMirror.fromTextArea(document.getElementById('code'), { | |
71 mode: 'text/html' | |
72 }); | |
73 editor.on("change", function() { | |
74 clearTimeout(delay); | |
75 delay = setTimeout(updatePreview, 300); | |
76 }); | |
77 | |
78 function updatePreview() { | |
79 var previewFrame = document.getElementById('preview'); | |
80 var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; | |
81 preview.open(); | |
82 preview.write(editor.getValue()); | |
83 preview.close(); | |
84 } | |
85 setTimeout(updatePreview, 300); | |
86 </script> | |
87 </article> |