<!doctype html> <html> <head> <title>CodeMirror 2: Full Screen Editing</title> <link rel="stylesheet" href="../lib/codemirror.css"> <script src="../lib/codemirror.js"></script> <link rel="stylesheet" href="../theme/default.css"> <link rel="stylesheet" href="../theme/night.css"> <script src="../mode/xml/xml.js"></script> <link rel="stylesheet" href="../css/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 2: 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", onKeyEvent: function(i, e) { // Hook into F11 if ((e.keyCode == 122 || e.keyCode == 27) && e.type == 'keydown') { e.stop(); return 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>