File modules/editor/codemirror/demo/preview.html

Last commit: Tue May 22 22:39:55 2018 +0200	Jan Dankert	Fix für PHP 7.2: 'Object' darf nun nicht mehr als Klassennamen verwendet werden. AUCH NICHT IN EINEM NAMESPACE! WTF, wozu habe ich das in einen verfickten Namespace gepackt? Wozu soll der sonst da sein??? Amateure. Daher nun notgedrungen unbenannt in 'BaseObject'.


     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>



Download modules/editor/codemirror/demo/preview.html


History
Tue, 22 May 2018 22:39:55 +0200	Jan Dankert	Fix für PHP 7.2: 'Object' darf nun nicht mehr als Klassennamen verwendet werden. AUCH NICHT IN EINEM NAMESPACE! WTF, wozu habe ich das in einen verfickten Namespace gepackt? Wozu soll der sonst da sein??? Amateure. Daher nun notgedrungen unbenannt in 'BaseObject'.