2
0

fullscreen.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>CodeMirror 2: Full Screen Editing</title>
  5. <link rel="stylesheet" href="../lib/codemirror.css">
  6. <script src="../lib/codemirror.js"></script>
  7. <link rel="stylesheet" href="../theme/default.css">
  8. <link rel="stylesheet" href="../theme/night.css">
  9. <script src="../mode/xml/xml.js"></script>
  10. <link rel="stylesheet" href="../css/docs.css">
  11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  12. <style type="text/css">
  13. .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
  14. .fullscreen {
  15. display: block;
  16. position: absolute;
  17. top: 0;
  18. left: 0;
  19. width: 100%;
  20. height: 100%;
  21. z-index: 9999;
  22. margin: 0;
  23. padding: 0;
  24. border: 0px solid #BBBBBB;
  25. opacity: 1;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <h1>CodeMirror 2: Full Screen Editing</h1>
  31. <form><textarea id="code" name="code" rows="5">
  32. <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
  33. <dd>Whether, when indenting, the first N*8 spaces should be
  34. replaced by N tabs. Default is false.</dd>
  35. <dt id="option_tabMode"><code>tabMode (string)</code></dt>
  36. <dd>Determines what happens when the user presses the tab key.
  37. Must be one of the following:
  38. <dl>
  39. <dt><code>"classic" (the default)</code></dt>
  40. <dd>When nothing is selected, insert a tab. Otherwise,
  41. behave like the <code>"shift"</code> mode. (When shift is
  42. held, this behaves like the <code>"indent"</code> mode.)</dd>
  43. <dt><code>"shift"</code></dt>
  44. <dd>Indent all selected lines by
  45. one <a href="#option_indentUnit"><code>indentUnit</code></a>.
  46. If shift was held while pressing tab, un-indent all selected
  47. lines one unit.</dd>
  48. <dt><code>"indent"</code></dt>
  49. <dd>Indent the line the 'correctly', based on its syntactic
  50. context. Only works if the
  51. mode <a href="#indent">supports</a> it.</dd>
  52. <dt><code>"default"</code></dt>
  53. <dd>Do not capture tab presses, let the browser apply its
  54. default behaviour (which usually means it skips to the next
  55. control).</dd>
  56. </dl></dd>
  57. <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  58. <dd>Determines whether and how new lines are indented when the
  59. enter key is pressed. The following modes are supported:
  60. <dl>
  61. <dt><code>"indent" (the default)</code></dt>
  62. <dd>Use the mode's indentation rules to give the new line
  63. the correct indentation.</dd>
  64. <dt><code>"keep"</code></dt>
  65. <dd>Indent the line the same as the previous line.</dd>
  66. <dt><code>"flat"</code></dt>
  67. <dd>Do not indent the new line.</dd>
  68. </dl></dd>
  69. <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  70. <dd>Determines whether and how new lines are indented when the
  71. enter key is pressed. The following modes are supported:
  72. <dl>
  73. <dt><code>"indent" (the default)</code></dt>
  74. <dd>Use the mode's indentation rules to give the new line
  75. the correct indentation.</dd>
  76. <dt><code>"keep"</code></dt>
  77. <dd>Indent the line the same as the previous line.</dd>
  78. <dt><code>"flat"</code></dt>
  79. <dd>Do not indent the new line.</dd>
  80. </dl></dd>
  81. <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  82. <dd>Determines whether and how new lines are indented when the
  83. enter key is pressed. The following modes are supported:
  84. <dl>
  85. <dt><code>"indent" (the default)</code></dt>
  86. <dd>Use the mode's indentation rules to give the new line
  87. the correct indentation.</dd>
  88. <dt><code>"keep"</code></dt>
  89. <dd>Indent the line the same as the previous line.</dd>
  90. <dt><code>"flat"</code></dt>
  91. <dd>Do not indent the new line.</dd>
  92. </dl></dd>
  93. <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  94. <dd>Determines whether and how new lines are indented when the
  95. enter key is pressed. The following modes are supported:
  96. <dl>
  97. <dt><code>"indent" (the default)</code></dt>
  98. <dd>Use the mode's indentation rules to give the new line
  99. the correct indentation.</dd>
  100. <dt><code>"keep"</code></dt>
  101. <dd>Indent the line the same as the previous line.</dd>
  102. <dt><code>"flat"</code></dt>
  103. <dd>Do not indent the new line.</dd>
  104. </dl></dd>
  105. </textarea></form>
  106. <script>
  107. (function () {
  108. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  109. lineNumbers: true,
  110. theme: "night",
  111. onKeyEvent: function(i, e) {
  112. // Hook into F11
  113. if ((e.keyCode == 122 || e.keyCode == 27) && e.type == 'keydown') {
  114. e.stop();
  115. return toggleFullscreenEditing();
  116. }
  117. }
  118. });
  119. function toggleFullscreenEditing()
  120. {
  121. var editorDiv = $('.CodeMirror-scroll');
  122. if (!editorDiv.hasClass('fullscreen')) {
  123. toggleFullscreenEditing.beforeFullscreen = { height: editorDiv.height(), width: editorDiv.width() }
  124. editorDiv.addClass('fullscreen');
  125. editorDiv.height('100%');
  126. editorDiv.width('100%');
  127. editor.refresh();
  128. }
  129. else {
  130. editorDiv.removeClass('fullscreen');
  131. editorDiv.height(toggleFullscreenEditing.beforeFullscreen.height);
  132. editorDiv.width(toggleFullscreenEditing.beforeFullscreen.width);
  133. editor.refresh();
  134. }
  135. }
  136. })();
  137. </script>
  138. <p>Press <strong>F11</strong> (or <strong>ESC</strong> in Safari on Mac OS X) when cursor is in the editor to toggle full screen editing.</p>
  139. <p><strong>Note:</strong> Does not currently work correctly in IE
  140. 6 and 7, where setting the height of something
  141. to <code>100%</code> doesn't make it full-screen.</p>
  142. </body>
  143. </html>