4
<title>CodeMirror: Upgrading to v2.2</title>
5
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
6
<link rel="stylesheet" type="text/css" href="docs.css"/>
7
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
11
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
14
<img src="baboon.png" class="logo" alt="logo"/>/* Upgrading to v2.2
20
<p>There are a few things in the 2.2 release that require some care
23
<h2>No more default.css</h2>
25
<p>The default theme is now included
26
in <a href="../lib/codemirror.css"><code>codemirror.css</code></a>, so
27
you do not have to included it separately anymore. (It was tiny, so
28
even if you're not using it, the extra data overhead is negligible.)
30
<h2>Different key customization</h2>
32
<p>CodeMirror has moved to a system
33
where <a href="manual.html#option_keyMap">keymaps</a> are used to
34
bind behavior to keys. This means <a href="../demo/emacs.html">custom
35
bindings</a> are now possible.</p>
37
<p>Three options that influenced key
38
behavior, <code>tabMode</code>, <code>enterMode</code>,
39
and <code>smartHome</code>, are no longer supported. Instead, you can
40
provide custom bindings to influence the way these keys act. This is
42
new <a href="manual.html#option_extraKeys"><code>extraKeys</code></a>
43
option, which can hold an object mapping key names to functionality. A
44
simple example would be:</p>
47
"Ctrl-S": function(instance) { saveText(instance.getValue()); },
51
<p>Keys can be mapped either to functions, which will be given the
52
editor instance as argument, or to strings, which are mapped through
53
functions through the <code>CodeMirror.commands</code> table, which
54
contains all the built-in editing commands, and can be inspected and
55
extended by external code.</p>
57
<p>By default, the <code>Home</code> key is bound to
58
the <code>"goLineStartSmart"</code> command, which moves the cursor to
59
the first non-whitespace character on the line. You can set do this to
60
make it always go to the very start instead:</p>
62
<pre> extraKeys: {"Home": "goLineStart"}</pre>
64
<p>Similarly, <code>Enter</code> is bound
65
to <code>"newlineAndIndent"</code> by default. You can bind it to
66
something else to get different behavior. To disable special handling
67
completely and only get a newline character inserted, you can bind it
68
to <code>false</code>:</p>
70
<pre> extraKeys: {"Enter": false}</pre>
72
<p>The same works for <code>Tab</code>. If you don't want CodeMirror
73
to handle it, bind it to <code>false</code>. The default behaviour is
74
to indent the current line more (<code>"indentMore"</code> command),
75
and indent it less when shift is held (<code>"indentLess"</code>).
76
There are also <code>"indentAuto"</code> (smart indent)
77
and <code>"insertTab"</code> commands provided for alternate
78
behaviors. Or you can write your own handler function to do something
79
different altogether.</p>
83
<p>Handling of tabs changed completely. The display width of tabs can
84
now be set with the <code>tabSize</code> option, and tabs can
85
be <a href="../demo/visibletabs.html">styled</a> by setting CSS rules
86
for the <code>cm-tab</code> class.</p>
88
<p>The default width for tabs is now 4, as opposed to the 8 that is
89
hard-wired into browsers. If you are relying on 8-space tabs, make
90
sure you explicitly set <code>tabSize: 8</code> in your options.</p>
added
removed
doc/upgrade_v2.2.html
