在浏览器中使用Vim模式编辑文字

使用Vim模式的需求

说起来最近在简书也码了5、6万字了，选择在这里写作、分享一些东西的一个很重要的原因是因为简书的编辑、发表、更新文章的机制比较轻简。
左markdown右渲染效果的编辑页面结构，包括发表前、发表后两套目录文章整理系统，以及一键发布、一键更新的机制(没有像CSDN等社区那样烦人的审核阶段)对写作者来说都足够user friendly。

但仍然是有改进空间的。上面提到的左编辑右效果的模式对markdown使用者而言很常见，这让我想起了之前使用过的另一个应用作业部落。

作业部落模式选择

在编辑方面，除了对markdown的语法支持更全面之外，其还提供了三种编辑方式，分别普通、Vim与Emacs。作为一名程序员，日常使用编辑器码字的时间是很长的，在代码之间移动、复制、穿梭、来去自如的最佳实践莫过于使用Vim的normal模式了，这点毋庸置疑。因此作业部落的这种对Vim的支持让我很是喜欢。
但并未选择长期在作业部落写作的一个很重要的原因是其本身并没有任何社区的构建，写了一堆东西有的感觉还可以根本没人捧个场还是难免有些落寞。

在重度使用印象笔记后，也一度寻求在印象笔记中直接使用markdown编辑生成笔记的方法。

马克飞象网页版

当时的最佳方案当然是马克飞象，其亦提供了三种编辑模式。亦花了几十元大洋买了付费服务，但并未坚持下来的原因是，evernote旧文章无法同步到马克飞象，马克飞象新编辑的文章又无法直接在evernote修改。整个应用起来还是不够爽。

最近几个月每天会刷个一两道leetcode，作为直接面向程序员的应用，其当然也提供了这三种常见的键位绑定。写一引起简单的函数，懒得打开本地编辑器，直接在上面编辑，体验倒也不错。

leetcode编辑页面

以上列举了一大堆，point是，简书要是也把编辑器改进成这个样子就好啦。
并不需要很复杂的实现，只需要Vim最棒的normal移动、复制、剪贴等功能就足够了(hjklopai等)，整个编辑体验会提升一大截，其他的像宏录制、寄存器、加载本地配置文件等实现一整个网页版的Vim或Emacs是没有必要的。
相信一些在简书写字的程序员同学或者Vim党肯定也深有体会。

几个方案

在开源的世界，很多遇到的问题早已有人问过，而且大多也早有了解决方案。
比如在浏览器中使用Vim模式编辑这个需求，去Google搜索browser textarea vim关键字即可找到一堆讨论或者开源项目。
比较有意思的是这些解决方案的思路、实现程度、颜值等方面都有着各自的特点。

wasavi

wasavi是一个日本开发者开发的chrome扩展，它可以为textarea添加一个上浮层， 可以在其中使用vim编辑，使用方便侵入性很小。

wasavi使用截图

其对vim原生的功能支持还是比较全面的(寄存器、宏录制竟然也可以)，此外，其还提供了一个网页应用，支持直接写文件到dropbox等各种云盘中。

vim-ghost

vim-ghost就比较猎奇了，下面的图可以感受一下。

vim-ghost使用截图

它的使用成本比较高，需要Neovim安装相应插件，Chrome安装相应插件，Python以及Python的相应包，还得开个websocket。
真是麻烦得不行。
作者的这个思路还是蛮有意思的，可以看出跟上面wasavi明显不同的实现思路，ghost起的自说明作用挺好的，直接将一个textarea映射到旁边打开的真实编辑器中，在编辑器中编辑再”ghost”到textarea中。
不过由于太麻烦了，装一大堆东西，上手成本高，操作上还要这边那边点几下，再输入一些命令，实在不能说是一个好的解决方案。

Surfingkeys

Surfingkeys并不是直接作为该问题的解决方案而设计的，它提供了一个机制，可以允许你在浏览器中定义自己的快捷键，这有点像Vimium插件，不过由于它的高度可自定义化，它当然是比Vimium更强大的存在。

使用Surfingkeys提供的vim模式编辑

有了上面的机制，它还集成了下面会提到的ace项目，实现了vim like edit，展现层面它的设计思路与wasavi有些类似，都是提供一个上浮框进行编辑，再用:wq写回textarea中。

此项目在github上有近2000颗star，功能方面可以同时代替vimium与wasavi两个插件，还有其他很多的神奇功能，笔者认为是一个比较好的解决方案，可以在很大程度上提高网上冲浪的体验。

让自己的网站可以像Vim一样编辑

ace

ace是一个浏览器代码编辑器项目，在github上有18000+star，作为代码编辑器，实现了一堆ide常用的功能，包括各主题切换，Vim、Emacs等编辑模式。
很重要的一点是，它提供了集成的机制，不少项目都是利用这种集成机制直接实现了自己的vim like edit ability。
对于前端开发者而言，新写一个项目时，很容易把这种功能赋予自己的项目，leetcode就是一个很好的例子。
其他还有一些项目如上面提到的Surfingkeys与chrome轻量级插件vimsert都是直接集成ace的功能即可。
不用重复造轮子嘛。

CodeMirror

CodeMirror是另一个浏览器代码编辑器项目，应该是与ace对标的产品，在github上亦有15000+star。
它当然也实现了这种功能，这篇文章有专门的介绍。在文章中提到了实现该功能的源码kaymap/vim.js，开发者应该可以加以使用。
但笔者认为其集成性做得不如ace好。

vim-in-textarea

vim-in-textarea是一个轻量级的方案，源码只有一个js文件1000行左右，使用js原生写了一套机制，很容易引入。
jsfiddle中有一个引入的例子，对于前端开发者来说可以直接使用。

有了以上几个方法，我相信简书@简宝玉增加这个功能也是轻而易举的事情，不妨考虑一下。

其他

vim.wasm

可以在浏览器中运行的编译成WebAssembly的Vim编辑器。

vim.js

可以加载本地配置文件的浏览器vim项目。

有一些牛人想要直接在浏览器中运行Vim应用，在找资料的过程中也一并记录了下来。
以上两个项目都是很大型的项目，使用C与vimscript编写，但笔者若于找不到它们的应用场景，只是感觉挺厉害的。可能是炫技项目吧，跟本篇主题也有一定相关性。
就像vim.js作者说的，这是一个Tool/Toy。
写着开心，也是很重要的呀。