preview.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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. context.fillStyle = 'rgb(250,0,0)';
  45. context.fillRect(10, 10, 55, 50);
  46. context.fillStyle = 'rgba(0, 0, 250, 0.5)';
  47. context.fillRect(30, 30, 55, 50);
  48. </script>
  49. </body>
  50. </html></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. });
  59. editor.on("change", function() {
  60. clearTimeout(delay);
  61. delay = setTimeout(updatePreview, 300);
  62. });
  63. function updatePreview() {
  64. var previewFrame = document.getElementById('preview');
  65. var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
  66. preview.open();
  67. preview.write(editor.getValue());
  68. preview.close();
  69. }
  70. setTimeout(updatePreview, 300);
  71. </script>
  72. </body>
  73. </html>