3

私はこれを作るのに少し苦労しています。Codemirror 編集機能を Vim モードでのみ、構文の強調表示なしで使用したい。つまり、テキスト領域をクリックすると、デモ ページVIM Demoに示されているのと同様のテキスト エディターで変換されます。ありがとう！

EDIT：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:保存コマンドのハンドラーを割り当てます。これは:w、vim のキー バインディングにマップされます。ドキュメントから、キーバインディングセクションで：

    キーマップのプロパティの値は、単一の引数 (CodeMirror インスタンス)、文字列、または false の関数のいずれかです。このような文字列はオブジェクトのプロパティを参照しCodeMirror.commands、デフォルトのキーバインディングで使用される多くの共通コマンドを定義し、それらを関数にマップします

  • 4:沈黙の音。

  • 5:textarea要素 (ID で示される) を DOM から取得し、codeその要素に基づいて 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 に答える