Sunday, April 6, 2014

... But will it vim?

Now that I’ve found a great new editor to write blog posts in, I need to know if there is a way to integrate my favorite text editor. SPOILER ALERT: it’s vim!

The answer to the question is a resounding YES! It is shockingly both possible and fairly easy!

Ctrl + Shift + j brings up the web console in Chrome. From there, all you have to do is copy and paste the following code into the console and you’re off to the races1!

var ace = {}
ace.require = require
ace.define = define
ace.require(["ace/lib/net"], function(acenet) {
    acenet.loadScript("//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/keybinding-vim.js", function() {
        e = document.querySelector(".ace_editor").env.editor
        ace.require(["ace/keyboard/vim"], function(acevim) {
            e.setKeyboardHandler(acevim.handler);
        })
    })
})

However, you’ll have to do that each time you open up StackEdit in the browser. The better way to do this is to wrap the above code in a StackEdit extension. Just copy the code below into the StackEdit Settings -> Extensions -> UserCustom field, and now you’re really off to the races!

userCustom.onReady = function() {
    var ace = {}
    ace.require = require
    ace.define = define
    ace.require(["ace/lib/net"], function(acenet) {
        acenet.loadScript("//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/keybinding-vim.js", function() {
            e = document.querySelector(".ace_editor").env.editor
            ace.require(["ace/keyboard/vim"], function(acevim) {
                e.setKeyboardHandler(acevim.handler);
            });
        });
    });
    window.ace = ace;
};

Special thanks to this issue ticket on GitHub that outlined the solution.


Written with StackEdit.


  1. If you love vim as much as I do, you’ll also have to exclude the StackEdit URL in the Vimium extension for Chrome before vim bindings will start working in StackEdit.

No comments:

Post a Comment