upgrade_v2.2.html 3.5 KB

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