12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: HTML5 preview</title>
- <script src=../lib/codemirror.js></script>
- <script src=../mode/xml/xml.js></script>
- <script src=../mode/javascript/javascript.js></script>
- <script src=../mode/css/css.js></script>
- <script src=../mode/htmlmixed/htmlmixed.js></script>
- <link rel=stylesheet href=../lib/codemirror.css>
- <link rel=stylesheet href=../doc/docs.css>
- <style type=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>
- </head>
- <body>
- <h1>CodeMirror: HTML5 preview</h1>
- <textarea id=code name=code>
- <!doctype html>
- <html>
- <head>
- <meta charset=utf-8>
- <title>HTML5 canvas demo</title>
- <style>p {font-family: monospace;}</style>
- </head>
- <body>
- <p>Canvas pane goes here:</p>
- <canvas id=pane width=300 height=200></canvas>
- <script>
- var canvas = document.getElementById('pane');
- var context = 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>
- <iframe id=preview></iframe>
- <script>
- var delay;
- // Initialize CodeMirror editor with a nice html5 canvas demo.
- var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
- mode: 'text/html',
- tabMode: 'indent'
- });
- editor.on("change", function() {
- clearTimeout(delay);
- delay = setTimeout(updatePreview, 300);
- });
-
- function updatePreview() {
- var previewFrame = document.getElementById('preview');
- var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
- preview.open();
- preview.write(editor.getValue());
- preview.close();
- }
- setTimeout(updatePreview, 300);
- </script>
- </body>
- </html>
|