2
0

preview.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>CodeMirror 2: HTML5 preview</title>
  5. <meta charset=utf-8>
  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=../theme/default.css>
  13. <link rel=stylesheet href=../css/docs.css>
  14. <style type=text/css>
  15. .CodeMirror {
  16. float: left;
  17. width: 50%;
  18. border: 1px solid black;
  19. }
  20. iframe {
  21. width: 49%;
  22. float: left;
  23. height: 300px;
  24. border: 1px solid black;
  25. border-left: 0px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <h1>CodeMirror 2: HTML5 preview</h1>
  31. <textarea id=code name=code>
  32. <!doctype html>
  33. <html>
  34. <head>
  35. <title>HTML5 canvas demo</title>
  36. <meta charset=utf-8>
  37. </head>
  38. <body>
  39. <canvas id=tutorial width=250 height=250></canvas>
  40. <script>
  41. var canvas = document.getElementById('tutorial');
  42. var context = canvas.getContext('2d');
  43. context.fillStyle = 'rgb(250,0,0)';
  44. context.fillRect(10, 10, 55, 50);
  45. context.fillStyle = 'rgba(0, 0, 250, 0.5)';
  46. context.fillRect(30, 30, 55, 50);
  47. </script>
  48. </body>
  49. </html>
  50. </textarea>
  51. <iframe id=preview></iframe>
  52. <script>
  53. var delay;
  54. // Initialize CodeMirror editor with a nice html5 canvas demo.
  55. var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
  56. mode: 'text/html',
  57. tabMode: 'indent',
  58. onChange: function() {
  59. clearTimeout(delay);
  60. delay = setTimeout(updatePreview, 300);
  61. }
  62. });
  63. function updatePreview() {
  64. var preview = document.getElementById('preview').contentDocument;
  65. preview.open();
  66. preview.write(editor.getValue());
  67. preview.close();
  68. }
  69. setTimeout(updatePreview, 300);
  70. </script>
  71. </body>
  72. </html>