upgrade_v2.2.html (3546B)
1 <!doctype html> 2 3 <title>CodeMirror: Version 2.2 upgrade guide</title> 4 <meta charset="utf-8"/> 5 <link rel=stylesheet href="docs.css"> 6 7 <div id=nav> 8 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="logo.png"></a> 9 10 <ul> 11 <li><a href="../index.html">Home</a> 12 <li><a href="manual.html">Manual</a> 13 <li><a href="https://github.com/codemirror/codemirror">Code</a> 14 </ul> 15 <ul> 16 <li><a class=active href="#">2.2 upgrade guide</a> 17 </ul> 18 </div> 19 20 <article> 21 22 <h2>Upgrading to v2.2</h2> 23 24 <p>There are a few things in the 2.2 release that require some care 25 when upgrading.</p> 26 27 <h3>No more default.css</h3> 28 29 <p>The default theme is now included 30 in <a href="../lib/codemirror.css"><code>codemirror.css</code></a>, so 31 you do not have to included it separately anymore. (It was tiny, so 32 even if you're not using it, the extra data overhead is negligible.) 33 34 <h3>Different key customization</h3> 35 36 <p>CodeMirror has moved to a system 37 where <a href="manual.html#option_keyMap">keymaps</a> are used to 38 bind behavior to keys. This means <a href="../demo/emacs.html">custom 39 bindings</a> are now possible.</p> 40 41 <p>Three options that influenced key 42 behavior, <code>tabMode</code>, <code>enterMode</code>, 43 and <code>smartHome</code>, are no longer supported. Instead, you can 44 provide custom bindings to influence the way these keys act. This is 45 done through the 46 new <a href="manual.html#option_extraKeys"><code>extraKeys</code></a> 47 option, which can hold an object mapping key names to functionality. A 48 simple example would be:</p> 49 50 <pre> extraKeys: { 51 "Ctrl-S": function(instance) { saveText(instance.getValue()); }, 52 "Ctrl-/": "undo" 53 }</pre> 54 55 <p>Keys can be mapped either to functions, which will be given the 56 editor instance as argument, or to strings, which are mapped through 57 functions through the <code>CodeMirror.commands</code> table, which 58 contains all the built-in editing commands, and can be inspected and 59 extended by external code.</p> 60 61 <p>By default, the <code>Home</code> key is bound to 62 the <code>"goLineStartSmart"</code> command, which moves the cursor to 63 the first non-whitespace character on the line. You can set do this to 64 make it always go to the very start instead:</p> 65 66 <pre> extraKeys: {"Home": "goLineStart"}</pre> 67 68 <p>Similarly, <code>Enter</code> is bound 69 to <code>"newlineAndIndent"</code> by default. You can bind it to 70 something else to get different behavior. To disable special handling 71 completely and only get a newline character inserted, you can bind it 72 to <code>false</code>:</p> 73 74 <pre> extraKeys: {"Enter": false}</pre> 75 76 <p>The same works for <code>Tab</code>. If you don't want CodeMirror 77 to handle it, bind it to <code>false</code>. The default behaviour is 78 to indent the current line more (<code>"indentMore"</code> command), 79 and indent it less when shift is held (<code>"indentLess"</code>). 80 There are also <code>"indentAuto"</code> (smart indent) 81 and <code>"insertTab"</code> commands provided for alternate 82 behaviors. Or you can write your own handler function to do something 83 different altogether.</p> 84 85 <h3>Tabs</h3> 86 87 <p>Handling of tabs changed completely. The display width of tabs can 88 now be set with the <code>tabSize</code> option, and tabs can 89 be <a href="../demo/visibletabs.html">styled</a> by setting CSS rules 90 for the <code>cm-tab</code> class.</p> 91 92 <p>The default width for tabs is now 4, as opposed to the 8 that is 93 hard-wired into browsers. If you are relying on 8-space tabs, make 94 sure you explicitly set <code>tabSize: 8</code> in your options.</p> 95 96 </article>