在Vim模式下使用Codemirror

Question

我在做这件事情时遇到了一些麻烦。我只想在Vim模式下使用Codemirror编辑功能，而不用任何语法高亮。也就是说，如果我点击文本区域，它将转换为类似的文本编辑器，如演示页面VIM Demo上所示。谢谢！

编辑： 如果没有Codemirror，请告诉我，我怎么可以转换在用户点击一个VIM型编辑区文本区的方法。我想把它作为一个插件，以便每当我点击某个页面上的文本区域时，它就会给我一个像（不完全是vim）的VIM环境来编辑。我应该如何去解决键盘绑定的问题？请帮忙！

Answer 1

CodeMirror负责所有的键绑定（以及vim模式的键映射），所以你只需要为textarea创建一个编辑器实例。

退房CodeMirror.fromTextArea()上的文档，下section on static methods，看看它是如何做。

您也可以参考vim bindings demo，只是看看源。这是CodeMirror实例初始化方式有：

1 | CodeMirror.commands.save = function() { 
2 |  alert("Saving"); 
3 | }; 
4 | 
5 | var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
6 |  lineNumbers: true, 
7 |  mode: "text/x-csrc", 
8 |  keyMap: "vim", 
9 |  showCursorWhenSelecting: true 
10 | }); 

让我们借此分开，下面的行不“：

• 1-3：分配用于保存命令处理程序，它映射到vim密钥绑定上的:w。从文档，在键绑定部分：

  在键盘映射的属性的值可以是 单个参数的任一功能（该CodeMirror实例），字符串或假。这样 字符串指CodeMirror.commands对象，它 定义了许多由缺省键绑定 使用的普通命令的属性，并将它们映射到功能

• 4：寂静的声音。

• 5：抓取从DOM textarea元件（具有code表示为它的ID），并将它传递到将创建基于该元件上的CodeMirror实例的静态方法。

• 6-9：设置各种选项：

  • 6：在阴沟里显示行数。

  • 7：将编辑器模式设置为C状以突出显示C代码。

  • 8：分配vim密钥绑定。

  • 9：那么，选择时显示光标。

• 10：把它包起来。

为了编辑模式和键绑定工作，所需的脚本需要加载的，所以我们会忍心包括那些还有：

<script src="../lib/codemirror.js"></script> <!-- main script --> 
<script src="../addon/dialog/dialog.js"></script> <!-- addon for vim messages --> 
<script src="../addon/search/searchcursor.js"></script> <!-- addon for vim messages --> 
<script src="../mode/clike/clike.js"></script> <!-- mode for C-like languages --> 
<script src="../keymap/vim.js"></script> <!-- key bindings for vim -->