I am having a little trouble making this thing up. I want to use Codemirror edit feature in Vim mode only, without any syntax highlighting. That is, if I click in the text area, it is converted in a similar text editor as shown on the demo page VIM Demo. Thanks!

EDIT : If not Codemirror, Please tell me the method how can I convert the text area in which the user clicks to a VIM type edit area. I want to make it as a plugin, so that whenever I click on a text area on some page, it gives me a VIM like (not exactly vim) environment to edit. How should I go about the keybinding thing? Please help!

I am having a little trouble making this thing up. I want to use Codemirror edit feature in Vim mode only, without any syntax highlighting. That is, if I click in the text area, it is converted in a similar text editor as shown on the demo page VIM Demo. Thanks!

EDIT : If not Codemirror, Please tell me the method how can I convert the text area in which the user clicks to a VIM type edit area. I want to make it as a plugin, so that whenever I click on a text area on some page, it gives me a VIM like (not exactly vim) environment to edit. How should I go about the keybinding thing? Please help!

• javascript
• plugins
• codemirror

Share Improve this question Follow edited Mar 2, 2013 at 19:31 Vivek Rai asked Mar 1, 2013 at 7:27 Vivek RaiVivek Rai 91011 gold badge99 silver badges2222 bronze badges 2

• I had added the question mark thing in ments. Sorry for that. Editing the main question. – Vivek Rai Commented Mar 2, 2013 at 19:31
• Couldn't make the Codemirror thing to work for the textareas I click on page dynamically. I wrote custom naive code, a script which introduces onkeypress events to each text area attribute and call a function on each key press. Thereby I filter the keys and perform accordingly. I implemented basic Insert mode, navigation and replace thing. However to make it full featured, I wished to use Codemirror for that.. for which I am clueless. <br/> I read the API docs, but couldn't find the way I wish to implement it. Sorry for mine being dumb if I missed silly parts. – Vivek Rai Commented Mar 2, 2013 at 22:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

CodeMirror takes care of all the key bindings (and key mapping for vim mode), so all you have to do is create an editor instance for the textarea at hand.

Check out CodeMirror.fromTextArea() on the docs, under the section on static methods, to see how it's done.

You can also refer to the vim bindings demo and simply take a look at the source. This is how the CodeMirror instance is initialized there:

1  | CodeMirror.mands.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 | });

Let's take this apart, following line no':

• 1-3: Assigning a handler for the save mand, which maps to :w on vim key bindings. From the docs, on the key bindings section:

  The values of properties in keymaps can be either functions of a single argument (the CodeMirror instance), strings, or false. Such strings refer to properties of the CodeMirror.mands object, which defines a number of mon mands that are used by the default keybindings, and maps them to functions

• 4: The sound of silence.

• 5: Fetching the textarea element (denoted with code as its ID) from the DOM, and passing it to a static method that will create a CodeMirror instance based on that element.

• 6-9: Setting various options:

  • 6: Showing line numbers in the gutter.

  • 7: Setting editor mode to C-like to highlight C code.

  • 8: Assign the vim key bindings.

  • 9: Well, showing cursor when selecting.

• 10: Wrap it up.

In order for the editor mode and key bindings to work, the required scripts need to be loaded, so we'd wanna include those as well:

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