Bind editor.html's keyBinding

demo/startup.js

@@ -59,6 +59,17 @@ exports.launch = function(env) {
     var emacs = require("ace/keyboard/keybinding/emacs").Emacs;
     var HashHandler = require("ace/keyboard/hash_handler").HashHandler;
 
+    var keybindings = {
+      // Null = use "default" keymapping
+      ace: null,
+      vim: vim,
+      emacs: emacs,
+      // This is a way to define simple keyboard remappings
+      custom: new HashHandler({
+          "gotoright": "Tab"
+      })
+    }
+
     var docs = {};
 
     // Make the lorem ipsum text a little bit longer.
@@ -112,16 +123,6 @@ exports.launch = function(env) {
     var modeEl = document.getElementById("mode");
     var wrapModeEl = document.getElementById("soft_wrap");
 
-    // This is how you can set a custom keyboardHandler.
-    //
-    // Define some basic keymapping using a hash:
-    // env.editor.setKeyboardHandler(new HashHandler({
-    //     "gotoright": "Tab"
-    // }));
-    //
-    // Use a more complex keymapping:
-    // env.editor.setKeyboardHandler(vim);
-
     bindDropdown("doc", function(value) {
         var doc = docs[value];
         env.editor.setSession(doc);
@@ -161,6 +162,10 @@ exports.launch = function(env) {
         env.editor.setTheme(value);
     });
 
+    bindDropdown("keybinding", function(value) {
+      env.editor.setKeyboardHandler(keybindings[value]);
+    });
+
     bindCheckbox("select_style", function(checked) {
         env.editor.setSelectionStyle(checked ? "line" : "text");
     });

editor.html

@@ -67,7 +67,8 @@
         <select id="keybinding" size="1">
           <option value="ace">Ace</option>
           <option value="vim">Vim</option>
-          <option value="emace">Emacs</option>
+          <option value="emacs">Emacs</option>
+          <option value="custom">Custom</option>
         </select>
       </td>
       <td align="right">