to-be-integrated/third-party/codemirror-3.15/demo/preview.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: HTML5 preview</title>
   6     <script src=../lib/codemirror.js></script>
   7     <script src=../mode/xml/xml.js></script>
   8     <script src=../mode/javascript/javascript.js></script>
   9     <script src=../mode/css/css.js></script>
  10     <script src=../mode/htmlmixed/htmlmixed.js></script>
  11     <link rel=stylesheet href=../lib/codemirror.css>
  12     <link rel=stylesheet href=../doc/docs.css>
  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   </head>
  28   <body>
  29     <h1>CodeMirror: HTML5 preview</h1>
  30     <textarea id=code name=code>
  31 <!doctype html>
  32 <html>
  33   <head>
  34     <meta charset=utf-8>
  35     <title>HTML5 canvas demo</title>
  36     <style>p {font-family: monospace;}</style>
  37   </head>
  38   <body>
  39     <p>Canvas pane goes here:</p>
  40     <canvas id=pane width=300 height=200></canvas>
  41     <script>
  42       var canvas = document.getElementById('pane');
  43       var context = canvas.getContext('2d');
  44
  45       context.fillStyle = 'rgb(250,0,0)';
  46       context.fillRect(10, 10, 55, 50);
  47
  48       context.fillStyle = 'rgba(0, 0, 250, 0.5)';
  49       context.fillRect(30, 30, 55, 50);
  50     </script>
  51   </body>
  52 </html></textarea>
  53     <iframe id=preview></iframe>
  54     <script>
  55       var delay;
  56       // Initialize CodeMirror editor with a nice html5 canvas demo.
  57       var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
  58         mode: 'text/html',
  59         tabMode: 'indent'
  60       });
  61       editor.on("change", function() {
  62         clearTimeout(delay);
  63         delay = setTimeout(updatePreview, 300);
  64       });
  65
  66       function updatePreview() {
  67         var previewFrame = document.getElementById('preview');
  68         var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
  69         preview.open();
  70         preview.write(editor.getValue());
  71         preview.close();
  72       }
  73       setTimeout(updatePreview, 300);
  74     </script>
  75   </body>
  76 </html>