Enable Vim mode in gist Ace Editor

Question

I'm trying to enable the Ace's keyBoard handler for my beloved Vim on github gists. This seems like it would be an easy thing to do, but I am struggling to:

1. Find the object that the gist ace editor is attached to (the ace default editor is not defined)
2. Set it to use VIM, via github's hosted Vim binding: https://gist.github.com/assets/ace/keybinding/vim-b9f3b98dd13151f9b4c7279d8259b69e.js

I found the following snippet on the Ace Google Group:

env.editor.setKeyboardHandler(require("ace/keyboard/keybinding/vim").Vim)

But that doesn't work (even if I substitute the github url) so i'm assuming that that applies to the Cloud9 IDE, and not selfhosted/custom Ace.

Answer 1

I posted on the ace Google Group (+rep to Harutyun) and received a reply with the following code:

ace.require("ace/lib/net").loadScript("https://rawgithub.com/ajaxorg/ace-builds/master/src-min-noconflict/keybinding-vim.js", 
function() { 
    e = document.querySelector(".ace_editor.ace-github").env.editor; 
    e.setKeyboardHandler(ace.require("ace/keyboard/vim").handler); 
}) 

Which works like a charm (Do note that the version of ace that github uses may change, which may break this).

It's a pain to enter this into the console each time, so I plan on adding it to a greasemonkey script (a chrome plugin might be nice! -- well see).

Update

---

I've written a small Chrome Extension that enables Vim bindings on most sites Ace.js and CodeMirror. Issues and contributions welcome at the github repo

Answer 2

In the latest version of ace (v1.1.1), vim and emacs bindings come built in. The following works:

editor.setKeyboardHandler("ace/keyboard/vim");

Answer 3

I wasn't able to get the other two solutions to work. (Nick's Chrome extension still works perfectly for me, though.)

Another solution is to change to vim mode in the settings menu.

To access the settings menu, make sure the ACE editor has focus, and push ctrl+, (Control and Comma).

This will open the menu on the right hand side of the screen. Find the "Keyboard Handler" dropdown and select vim. Push escape or click somewhere off of the settings menu to close it.

vim mode should now be activated.

Answer 4

You have to install the ace-builds along with react-ace to access themes, keybinding and others

npm install react-ace ace-builds

In react you have to add the following lines:

import "ace-builds/src-noconflict/keybinding-vim"
<AceEditor
  ...
  keyboardHandler='vim'
  ...
/>