CodeMirrorでブラウザ上で動作するコードエディタを作る #JavaScript

はじめに

開発しているアプリの環境で画面のデザインや動作サンプルを作るのにjsFiddleみたいなエディタがあるといいなと思ったので簡単に調べた。
バックエンドは適当に実装するとして、フロントエンドにはjsFiddleでも使っているCodeMirrorを使うのが良さそう。

CodeMirrorはJavaScriptライブラリで、シンタックスハイライトやオートインデント、行番号表示などコードエディタとして必要な機能を一通り揃えており、対応言語も多数ある模様。
また、アドオンを導入することで括弧の補完やハイライト、Ctrl+Spaceでコードの自動補完などの機能を持たせることもできる。
あと他ライブラリに非依存なので導入しやすい。

導入

http://codemirror.net/から「DOWNLOAD LATEST RELEASE」をクリックして最新版のzipファイルをダウンロード・解凍する。
言語毎の設定やアドオンはそれぞれ個別の.jsファイルとして存在しており、必要なものだけ読み込んで使う。

基本

例としてJavaScriptエディタを作成する。
javascript.jsを読み込み、初期化時にmode: 'javascript'を指定する。
lineNumbers: trueで行番号を表示、indentUnit: 4でインデント幅をスペース4個にしている(デフォルトは2)。

<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<!-- 言語に応じたjsファイルを読み込む -->
<script src="mode/javascript/javascript.js"></script>
...
<textarea id="editor_js" rows="30" cols="50"></textarea>

var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor_js'), {
    mode: "javascript",
    lineNumbers: true,
    indentUnit: 4
});

これだけ。
エディタの入力内容をtextareaに同期させるにはsave()メソッドを呼び出す。

jsEditor.save();

エディタのスタイル

エディタで使用するフォント等のスタイルを指定したい場合は.CodeMirrorのスタイルを上書きする。

.CodeMirror {
    font-family: Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
    font-size: 9pt;
    height: 100%;
}

行番号表示や選択範囲等細かい設定も可能。Customized Stylingを参照。

アドオンを導入する

addon/配下にある各アドオンのうち、導入したいアドオンの.jsファイルを読み込む。
例として括弧を自動補完するアドオンclosebrackets.jsを導入する。

<script src="lib/codemirror.js"></script>
<script src="mode/javascript/javascript.js"></script>
<script src="addon/edit/closebrackets.js"></script>

closebrackets.jsは初期化時にオプションを指定する必要がある。

var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor_js'), {
    mode: "javascript",
    autoCloseBrackets: true
});

使用方法はアドオンによって異なる。Addonsを参照。

さいごに

ちょっとだけ触ってみた感じでは、少なくとも自分の目的においてはかなり優秀なライブラリという印象。
基本的にはここに書いたことだけで大体なんとかなっちゃう。
他にも任意のキーマッピングを追加するAPIとかある。暇なときに追記したい。
あと自動補完アドオンで特定の文脈に任意の候補を追加したいのだけど難しそう、というかできるかわからない。
これも調べてみていい感じにほにゃほにゃできたらまとめて書く。

追記

ほにゃほにゃする前にエディタ作る話自体なくなってしまい、完全に放置していましたが
コード補完について、@mizchi氏がちょうどよい記事を書かれています。
・CodeMirrorでAutoCompleteする