3

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

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

4

1 回答 1

7

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

查看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：为保存命令分配一个处理程序，该处理程序映射到:wvim 键绑定。从文档中，在键绑定部分：

    键映射中的属性值可以是单个参数（CodeMirror 实例）的函数、字符串或 false。此类字符串引用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 -->
于 2013-03-03T10:34:53.967 回答