| <!doctype html> | |
| <html> | |
| <head> | |
| <title>CodeMirror: Full Screen Editing</title> | |
| <link rel="stylesheet" href="../lib/codemirror.css"> | |
| <script src="../lib/codemirror.js"></script> | |
| <link rel="stylesheet" href="../theme/night.css"> | |
| <script src="../mode/xml/xml.js"></script> | |
| <link rel="stylesheet" href="../doc/docs.css"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> | |
| <style type="text/css"> | |
| .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} | |
| .fullscreen { | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 9999; | |
| margin: 0; | |
| padding: 0; | |
| border: 0px solid #BBBBBB; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>CodeMirror: Full Screen Editing</h1> | |
| <form><textarea id="code" name="code" rows="5"> | |
| <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt> | |
| <dd>Whether, when indenting, the first N*8 spaces should be | |
| replaced by N tabs. Default is false.</dd> | |
| <dt id="option_tabMode"><code>tabMode (string)</code></dt> | |
| <dd>Determines what happens when the user presses the tab key. | |
| Must be one of the following: | |
| <dl> | |
| <dt><code>"classic" (the default)</code></dt> | |
| <dd>When nothing is selected, insert a tab. Otherwise, | |
| behave like the <code>"shift"</code> mode. (When shift is | |
| held, this behaves like the <code>"indent"</code> mode.)</dd> | |
| <dt><code>"shift"</code></dt> | |
| <dd>Indent all selected lines by | |
| one <a href="#option_indentUnit"><code>indentUnit</code></a>. | |
| If shift was held while pressing tab, un-indent all selected | |
| lines one unit.</dd> | |
| <dt><code>"indent"</code></dt> | |
| <dd>Indent the line the 'correctly', based on its syntactic | |
| context. Only works if the | |
| mode <a href="#indent">supports</a> it.</dd> | |
| <dt><code>"default"</code></dt> | |
| <dd>Do not capture tab presses, let the browser apply its | |
| default behaviour (which usually means it skips to the next | |
| control).</dd> | |
| </dl></dd> | |
| <dt id="option_enterMode"><code>enterMode (string)</code></dt> | |
| <dd>Determines whether and how new lines are indented when the | |
| enter key is pressed. The following modes are supported: | |
| <dl> | |
| <dt><code>"indent" (the default)</code></dt> | |
| <dd>Use the mode's indentation rules to give the new line | |
| the correct indentation.</dd> | |
| <dt><code>"keep"</code></dt> | |
| <dd>Indent the line the same as the previous line.</dd> | |
| <dt><code>"flat"</code></dt> | |
| <dd>Do not indent the new line.</dd> | |
| </dl></dd> | |
| <dt id="option_enterMode"><code>enterMode (string)</code></dt> | |
| <dd>Determines whether and how new lines are indented when the | |
| enter key is pressed. The following modes are supported: | |
| <dl> | |
| <dt><code>"indent" (the default)</code></dt> | |
| <dd>Use the mode's indentation rules to give the new line | |
| the correct indentation.</dd> | |
| <dt><code>"keep"</code></dt> | |
| <dd>Indent the line the same as the previous line.</dd> | |
| <dt><code>"flat"</code></dt> | |
| <dd>Do not indent the new line.</dd> | |
| </dl></dd> | |
| <dt id="option_enterMode"><code>enterMode (string)</code></dt> | |
| <dd>Determines whether and how new lines are indented when the | |
| enter key is pressed. The following modes are supported: | |
| <dl> | |
| <dt><code>"indent" (the default)</code></dt> | |
| <dd>Use the mode's indentation rules to give the new line | |
| the correct indentation.</dd> | |
| <dt><code>"keep"</code></dt> | |
| <dd>Indent the line the same as the previous line.</dd> | |
| <dt><code>"flat"</code></dt> | |
| <dd>Do not indent the new line.</dd> | |
| </dl></dd> | |
| <dt id="option_enterMode"><code>enterMode (string)</code></dt> | |
| <dd>Determines whether and how new lines are indented when the | |
| enter key is pressed. The following modes are supported: | |
| <dl> | |
| <dt><code>"indent" (the default)</code></dt> | |
| <dd>Use the mode's indentation rules to give the new line | |
| the correct indentation.</dd> | |
| <dt><code>"keep"</code></dt> | |
| <dd>Indent the line the same as the previous line.</dd> | |
| <dt><code>"flat"</code></dt> | |
| <dd>Do not indent the new line.</dd> | |
| </dl></dd> | |
| </textarea></form> | |
| <script> | |
| (function () { | |
| var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
| lineNumbers: true, | |
| theme: "night", | |
| extraKeys: {"F11": toggleFullscreenEditing, "Esc": toggleFullscreenEditing} | |
| }); | |
| function toggleFullscreenEditing() | |
| { | |
| var editorDiv = $('.CodeMirror-scroll'); | |
| if (!editorDiv.hasClass('fullscreen')) { | |
| toggleFullscreenEditing.beforeFullscreen = { height: editorDiv.height(), width: editorDiv.width() } | |
| editorDiv.addClass('fullscreen'); | |
| editorDiv.height('100%'); | |
| editorDiv.width('100%'); | |
| editor.refresh(); | |
| } | |
| else { | |
| editorDiv.removeClass('fullscreen'); | |
| editorDiv.height(toggleFullscreenEditing.beforeFullscreen.height); | |
| editorDiv.width(toggleFullscreenEditing.beforeFullscreen.width); | |
| editor.refresh(); | |
| } | |
| } | |
| })(); | |
| </script> | |
| <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> | |
| <p><strong>Note:</strong> Does not currently work correctly in IE | |
| 6 and 7, where setting the height of something | |
| to <code>100%</code> doesn't make it full-screen.</p> | |
| </body> | |
| </html> | |