summaryrefslogtreecommitdiff
path: root/codemirror_ui/lib/CodeMirror-2.3/demo/preview.html
diff options
context:
space:
mode:
Diffstat (limited to 'codemirror_ui/lib/CodeMirror-2.3/demo/preview.html')
-rw-r--r--codemirror_ui/lib/CodeMirror-2.3/demo/preview.html76
1 files changed, 76 insertions, 0 deletions
diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/preview.html b/codemirror_ui/lib/CodeMirror-2.3/demo/preview.html
new file mode 100644
index 0000000..607a621
--- /dev/null
+++ b/codemirror_ui/lib/CodeMirror-2.3/demo/preview.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CodeMirror: HTML5 preview</title>
+ <meta charset=utf-8>
+ <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',
+ onChange: 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>