Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>CodeMirror: Upgrading to v2.2</title> | |
| <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/> | |
| <link rel="stylesheet" type="text/css" href="docs.css"/> | |
| </head> | |
| <body> | |
| <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1> | |
| <div class="grey"> | |
| <img src="baboon.png" class="logo" alt="logo"/> | |
| <pre> | |
| /* Upgrading to | |
| v2.2 */ | |
| </pre> | |
| </div> | |
| <div class="left"> | |
| <p>There are a few things in the 2.2 release that require some care | |
| when upgrading.</p> | |
| <h2>No more default.css</h2> | |
| <p>The default theme is now included | |
| in <a href="../lib/codemirror.css"><code>codemirror.css</code></a>, so | |
| you do not have to included it separately anymore. (It was tiny, so | |
| even if you're not using it, the extra data overhead is negligible.) | |
| <h2>Different key customization</h2> | |
| <p>CodeMirror has moved to a system | |
| where <a href="manual.html#option_keyMap">keymaps</a> are used to | |
| bind behavior to keys. This means <a href="../demo/emacs.html">custom | |
| bindings</a> are now possible.</p> | |
| <p>Three options that influenced key | |
| behavior, <code>tabMode</code>, <code>enterMode</code>, | |
| and <code>smartHome</code>, are no longer supported. Instead, you can | |
| provide custom bindings to influence the way these keys act. This is | |
| done through the | |
| new <a href="manual.html#option_extraKeys"><code>extraKeys</code></a> | |
| option, which can hold an object mapping key names to functionality. A | |
| simple example would be:</p> | |
| <pre> extraKeys: { | |
| "Ctrl-S": function(instance) { saveText(instance.getValue()); }, | |
| "Ctrl-/": "undo" | |
| }</pre> | |
| <p>Keys can be mapped either to functions, which will be given the | |
| editor instance as argument, or to strings, which are mapped through | |
| functions through the <code>CodeMirror.commands</code> table, which | |
| contains all the built-in editing commands, and can be inspected and | |
| extended by external code.</p> | |
| <p>By default, the <code>Home</code> key is bound to | |
| the <code>"goLineStartSmart"</code> command, which moves the cursor to | |
| the first non-whitespace character on the line. You can set do this to | |
| make it always go to the very start instead:</p> | |
| <pre> extraKeys: {"Home": "goLineStart"}</pre> | |
| <p>Similarly, <code>Enter</code> is bound | |
| to <code>"newlineAndIndent"</code> by default. You can bind it to | |
| something else to get different behavior. To disable special handling | |
| completely and only get a newline character inserted, you can bind it | |
| to <code>false</code>:</p> | |
| <pre> extraKeys: {"Enter": false}</pre> | |
| <p>The same works for <code>Tab</code>. If you don't want CodeMirror | |
| to handle it, bind it to <code>false</code>. The default behaviour is | |
| to indent the current line more (<code>"indentMore"</code> command), | |
| and indent it less when shift is held (<code>"indentLess"</code>). | |
| There are also <code>"indentAuto"</code> (smart indent) | |
| and <code>"insertTab"</code> commands provided for alternate | |
| behaviors. Or you can write your own handler function to do something | |
| different altogether.</p> | |
| <h2>Tabs</h2> | |
| <p>Handling of tabs changed completely. The display width of tabs can | |
| now be set with the <code>tabSize</code> option, and tabs can | |
| be <a href="../demo/visibletabs.html">styled</a> by setting CSS rules | |
| for the <code>cm-tab</code> class.</p> | |
| <p>The default width for tabs is now 4, as opposed to the 8 that is | |
| hard-wired into browsers. If you are relying on 8-space tabs, make | |
| sure you explicitly set <code>tabSize: 8</code> in your options.</p> | |
| </div> | |
| </body> | |
| </html> | |