|
0
|
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="https://codemirror.net/5"><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/codemirror5">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 behavior. 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>
|
