Mercurial
comparison .cms/lib/codemirror/doc/upgrade_v2.2.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
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> |