CodeMirrorの使い方

JavaScript でコードエディタを作る際に便利なコードミラーの使い方やメモをまとめていきます。

対象バージョン : CodeMirror 5.40.0

利用方法

CodeMirror からファイルをダウンロードし、適当に展開します。GitHub の方からダウンロードすると、必要ファイルが含まれていなかったため、先のサイトのダウンロードから直接ダウンロードするのがおすすめです。

次に、展開したファイルのうち、lib と mode フォルダを利用先のフォルダにコピーし、対象のファイルから以下のような感じで参照します。

<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script src="mode/javascript/javascript.js"></script>

mode フォルダからは、コードのハイライトやコード補完に使用したい言語のもの選んで参照します。

次に、コードエディタを HTML に配置します。配置したい位置に <textarea> タグを設置します。そして、JavaScript 側で CodeMirror のオブジェクトを生成します。

コード1: CodeMirror の生成例

<textarea id="txt-editor"></textarea>

<script type="text/javascript">
    var editor = CodeMirror.fromTextArea(document.getElementById("txt-editor"),
    {
        mode:"javascript", // 言語を設定する
    });
</script>

初期化時に、パラメータを渡すと、スタイルを変更できます。以下のような感じです。（詳細はこちら）

コード2: CodeMirror の設定

editor = CodeMirror.fromTextArea(document.getElementById("txt-editor"),
{
    mode:"javascript",
    lineNumbers: true,　 // 行番号を表示する
    lineWrapping: true,　 // 行を折り返す
});

よく使いそうなものは以下のとおりです。

表1: よく使いそうな config

mode (string)	書式のモード
lineNumbers (boolean)	行番号の表示
lineWrapping (boolean)	行を折り返す

サイズ変更

CodeMirror のエディタの大きさは、setSize メソッドで設定可能です。数値のほか、% などでの指定も可能なようです。

コード3: サイズの変更

// 数値指定
editor.setSize(600, 400);

// %指定
editor.setSize("100%", "100%");

CodeMirror から textarea へ

CodeMirror で編集したテキストを textarea へ反映させるには、save メソッドを呼びます。

editor.save();
var text = $("#txt-editor").val();

CodeMirror へテキストを設定

CodeMirror にテキストを設定するには、以下のようにします。

コード4: テキストの設定

var doc = editor.getDoc();
doc.setValue("文字列");
editor.clearHistory(); // Undoでもとに戻らないよう、履歴を消す。

独自のモードを作成 (SimpleMode)

AddOn にある SimpleMode を利用すると簡単にモードを作成できます。まず、addon の SimpleMode を読み込みます（addon フォルダもコピーしておきます）。

<script src="addon/mode/simple.js"></script>

次に、モードを定義します。大枠は以下のような感じです。

コード5: SimpleMode のサンプル

CodeMirror.defineSimpleMode("sumiredoc", {
  start: [
    {regex: /(\[\/{0,1})(.*?)(\])/, token:["tag", null, "tag"]},
    {regex: /(\{)(.*?)(\})/, token:["tag2", null, "tag2"]},
    {regex: /^\/\/ .*/, token: "comment"},
    {regex: /^(!1|!2|!3|!4|!!) .*/, token: "keyword"},
  ],
  comment: [
  ],
  meta: {
  }
});

詳細は、こちらを参照してください。

SimpleMode を使わない方法は、こちらで紹介しています。

ハイライトの色・スタイルを変更

「lib/codemirror.css」の

.cm-s-default .cm-????

のスタイルを変更します。例えば、コメント (comment) であれば以下のような感じです。おそらく正規のやり方ではない ...?

.cm-s-default .cm-comment {color: green;}

文字列の検索 / 置換

検索系の AddOn を追加します。詳細は、デモの Search/Replace を参考にしています。

AddOn 用のスタイルシートとコードを読み込めば、最低限の実装は完了です。

コード6: 検索用のスタイルシートと JavaScript を追加読み込み

<link rel="stylesheet" href="addon/dialog/dialog.css">
<link rel="stylesheet" href="addon/search/matchesonscrollbar.css">
<script src="addon/dialog/dialog.js"></script>
<script src="addon/search/searchcursor.js"></script>
<script src="addon/search/search.js"></script>
<script src="addon/scroll/annotatescrollbar.js"></script>
<script src="addon/search/matchesonscrollbar.js"></script>
<script src="addon/search/jump-to-line.js"></script>

フォーカスを当てる

cm.focus()

を使います。

コード7: CodeMirror にフォーカスを当てる

editor.focus();

カーソルの移動とスクロール

カーソル位置の取得は、

doc.getCursor(?start: string) → {line, ch}

で可能です。

doc.setCursor(pos: {line, ch}|number, ?ch: number, ?options: object)

を使います。カーソルが画面外の場合、自動的に画面内なるようにスクロールします。

行等を基準として表示位置を移動する（スクロールさせる）場合は、

cm.scrollIntoView(what: {line, ch}|{left, top, right, bottom}|{from, to}|null, ?margin: number)

を使用します。

コード8: カーソルの移動とスクロール

// カーソルを10,3へ移動し、30,3が画面に入るように表示する。
var doc = editor.getDoc();
editor.scrollIntoView(Math.min(30, doc.lineCount() - 1), 3); // ドキュメントの行数を超えるとエラーになるので注意
doc.setCursor(10 ,3);

行数は、0 からカウントです。

選択範囲の設定

doc.setSelection(anchor: {line, ch}, ?head: {line, ch}, ?options: object)

を使います。デフォルトで選択範囲が表示されるようにスクロールします。

コード9: 選択範囲の設定

doc.setSelection(
	{ line: S_Line, ch: S_Ch },
	{ line: E_Line, ch: E_Ch });

テキストのマーキング

doc.markText(from: {line, ch}, to: {line, ch}, ?options: object) → TextMarker

関数を使います。詳細はこちら。戻り値の TextMarker を操作すれば、更にマーカーの編集ができます。

コード10: テキストにクラスを設定する例

doc.markText(
	{ line: S_Line, ch: S_Ch },
	{ line: E_Line, ch: E_Ch },
	{className: "test-style"});

マーカーを消したい場合は、TextMarker オブジェクトの

clear()

メソッドを呼べば消えます。

マーカーの取得は、

doc.findMarks(from: {line, ch}, to: {line, ch}) → array<TextMarker>

doc.findMarksAt(pos: {line, ch}) → array<TextMarker>

```
doc.getAllMarks() → array<TextMarker>
```

などで可能です。すべてのマーカーを消す場合は、以下のようにします。

コード11: 全マーカーを削除

var marks = doc.getAllMarks();
for(var i = 0; i < marks.length; i++)
{
	marks[i].clear();
}

テキストの編集コマンド

文字列の挿入

カーソルの位置を取得し、

doc.replaceRange()

を使って挿入します。

コード12: 文字列の挿入

var doc = editor.getDoc();
var cur = doc.getCursor();
doc.replaceRange("文字列", {line:cur.line, ch:cur.ch});

更新イベント

イベントは、

cm.on

メソッドを使って設定します。

表2: 更新イベント

イベント名	動作
change	編集時に発火。第二引数に更新内容が渡される
cursorActivity	カーソルの状態変更時に内容が渡されます。

コード表示として使う

読み取り専用設定

初期化時に、readOnly を設定します。

コード13: 読み取り専用設定

    var editor = CodeMirror.fromTextArea(document.getElementById("txt-editor"),
    {
        mode:"javascript",
		readOnly: true, //読み取り専用設定
    });

コードの高さに合わせる

表示がコードのサイズに合っていない場合は、以下のように手動計算します。自前で、行数とデフォルトのテキストの高さを取得し、少しマージンを足して高さを変更します。setSize は null を指定すると変更が起きないため、幅は null を渡してそのままにします。（本当は、もっと良い方法がありそうですが…）

var doc = cEditor.getDoc();
cEditor.setSize(null, doc.lineCount() * cEditor.defaultTextHeight() + 10);

画像を貼り付けたときの挙動を作る

CodeMirror にクリップボードから画像を貼り付けた際や、ドラッグ・アンド・ドロップした際の挙動を作ります。

ペースト時のイベントを設定

cm.on

メソッドを使い、paste イベントを設定します。設定する関数の第一引数には、CodeMirror のオブジェクト、第二引数にはイベントオブジェクトが渡されます。設定した関数内で

preventDefault

を呼べば、それ以上の処理が止まります。こちらを参考にしました。

コード14: ペーストイベントの設定

var pasteEvent = function(cm, e) {
	//デフォルトの処理は止められる
    e.preventDefault();
}
editor.on("paste", pasteEvent);

最上位の DOM オブジェクトを取得する

cm.getWrapperElement()

で CodeMirror の最上位の HTMLElement が取得できます。そこに、クラスや ID を設定するとこで、CSS で個別にスタイルを変更することもできます。

// cEditorに cm-test-editor クラスを設定する
cEditor.getWrapperElement().classList.add("cm-test-editor");

問題点

日本語環境で使うと、いくらか問題がありました。

PC の Firefox で Microsoft IME を使っている場合、変換ウィンドウが画面の左上にちらちらと表示される
Chrome のデフォルトのフォントサイズが小さい
モバイルでの入力に問題多数（詳しくはこちら）