openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

preview.html (2417B)

      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="http://codemirror.net"><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/codemirror">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>