|
|
<!doctype html>
<title>CodeMirror: Version 2.2 upgrade guide</title><meta charset="utf-8"/><link rel=stylesheet href="docs.css">
<div id=nav> <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="logo.png"></a>
<ul> <li><a href="../index.html">Home</a> <li><a href="manual.html">Manual</a> <li><a href="https://github.com/codemirror/codemirror5">Code</a> </ul> <ul> <li><a class=active href="#">2.2 upgrade guide</a> </ul></div>
<article>
<h2>Upgrading to v2.2</h2>
<p>There are a few things in the 2.2 release that require some carewhen upgrading.</p>
<h3>No more default.css</h3>
<p>The default theme is now includedin <a href="../lib/codemirror.css"><code>codemirror.css</code></a>, soyou do not have to included it separately anymore. (It was tiny, soeven if you're not using it, the extra data overhead is negligible.)
<h3>Different key customization</h3>
<p>CodeMirror has moved to a systemwhere <a href="manual.html#option_keyMap">keymaps</a> are used tobind behavior to keys. This means <a href="../demo/emacs.html">custombindings</a> are now possible.</p>
<p>Three options that influenced keybehavior, <code>tabMode</code>, <code>enterMode</code>,and <code>smartHome</code>, are no longer supported. Instead, you canprovide custom bindings to influence the way these keys act. This isdone through thenew <a href="manual.html#option_extraKeys"><code>extraKeys</code></a>option, which can hold an object mapping key names to functionality. Asimple 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 theeditor instance as argument, or to strings, which are mapped throughfunctions through the <code>CodeMirror.commands</code> table, whichcontains all the built-in editing commands, and can be inspected andextended by external code.</p>
<p>By default, the <code>Home</code> key is bound tothe <code>"goLineStartSmart"</code> command, which moves the cursor tothe first non-whitespace character on the line. You can set do this tomake it always go to the very start instead:</p>
<pre> extraKeys: {"Home": "goLineStart"}</pre>
<p>Similarly, <code>Enter</code> is boundto <code>"newlineAndIndent"</code> by default. You can bind it tosomething else to get different behavior. To disable special handlingcompletely and only get a newline character inserted, you can bind itto <code>false</code>:</p>
<pre> extraKeys: {"Enter": false}</pre>
<p>The same works for <code>Tab</code>. If you don't want CodeMirrorto handle it, bind it to <code>false</code>. The default behaviour isto 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 alternatebehavior. Or you can write your own handler function to do somethingdifferent altogether.</p>
<h3>Tabs</h3>
<p>Handling of tabs changed completely. The display width of tabs cannow be set with the <code>tabSize</code> option, and tabs canbe <a href="../demo/visibletabs.html">styled</a> by setting CSS rulesfor the <code>cm-tab</code> class.</p>
<p>The default width for tabs is now 4, as opposed to the 8 that ishard-wired into browsers. If you are relying on 8-space tabs, makesure you explicitly set <code>tabSize: 8</code> in your options.</p>
</article>
|
