在 Vim 模式下使用 Codemirror

Question

我在编造这件事时遇到了一点麻烦。我只想在 Vim 模式下使用 Codemirror 编辑功能，没有任何语法高亮。也就是说，如果我单击文本区域，它会在类似的文本编辑器中进行转换，如演示页面VIM Demo 所示。谢谢！

编辑： 如果不是Codemirror，请告诉我如何将用户单击的文本区域转换为VIM类型的编辑区域的方法。我想把它做成一个插件，这样每当我点击某个页面上的文本区域时，它就会给我一个类似 VIM（不完全是 vim）的环境来编辑。我应该如何处理键绑定的事情？请帮忙！

Answer 1

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

查看文档中section on static methods 下的CodeMirror.fromTextArea()，了解它是如何完成的。

也可以参考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：为 save 命令分配一个处理程序，该处理程序映射到 vim 键绑定上的 :w。在文档中，在键绑定部分：

  键映射中的属性值可以是 单个参数（CodeMirror 实例）、字符串或 false。这样的 字符串是指CodeMirror.commands 对象的属性，它 定义了一些默认使用的常用命令 键绑定，并将它们映射到函数

• 4：寂静之声。

• 5: 从 DOM 中获取 textarea 元素（以 code 作为其 ID），并将其传递给静态方法，该方法将基于那个元素。

• 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 -->