1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 | <!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> |