JavaScript

Ace (Ajax.org Cloud9 Editor)に関するTips

More than 1 year has passed since last update.

ブラウザ上にエディタを表示できるライブラリAceを使う機会があり、Aceの表示方法をいろいろ試してみたことをメモしておきます。

Aceの使い方等については、公式のリファレンスなどを参照下さい。
http://ace.c9.io/

以下、Tipsです。

左端の行数表示を消す

VirtualRendererのsetShowGutterメソッドを利用します。

editor.js
var editor = ace.edit("editor");
editor.renderer.setShowGutter(false);

参考: https://groups.google.com/forum/#!topic/ace-discuss/qRb_uKRtDUY

任意の行にアノテーションを付ける

スクリーンショット 2014-05-09 17.51.16.png

上の画像の赤いバツ印を付けたい場合、EditSessionのsetAnnotationsメソッドを利用します。

setAnnotationsメソッドには、アノテーションを指定する配列を渡します。
アノテーションには、

  • 行(Number)
  • アノテーションのタイプ(String)
  • マウスオーバーした時に出すメッセージ(String)

を追加します。

editor.js
var annotations = [
        {
            row: 2,
            type: "error",
            text: "error message"
        }
];

var editor = ace.edit("editor");
editor.getSession().setAnnotations(annotations);

注意点として、ブラウザ上での行表示は1から始まりますが、
rowで指定するのは0から始まります。(row:0 で1行目にアノテーションが付きます。)

参考: https://github.com/ajaxorg/ace-builds/blob/master/src/ace.js#L14172

任意の行をハイライトする

スクリーンショット 2014-05-09 18.17.07.png

上のアノテーションだけでは飽きたらず、行にも色を付けたいときは、
EditSessionのhighlightLinesメソッドを使います。
このメソッドの引数には、

  • ハイライトの先頭行(Number)
  • ハイライトする終端行(Number)
  • 色をCSSのクラス名で指定(String)

を指定します。
また、戻り値はハイライトを表示するためのRangeオブジェクトです。

CSSは以下のようにしました。

styles.css
.error_line {
    background-color: #f2dede;
    position: absolute;
}

positionをabsoluteにしないと、任意の行にハイライトを付けることができません。
上のCSSを使って4行目をハイライトする場合は、以下のように書きます。

editor.js
var editor = ace.edit("editor");
var session = editor.getSession();
var range = session.highlightLines(3, 3, "error_line");

ハイライトを消す場合、EditSessionのremoveMarkerメソッドを使います。
highlightLinesメソッドの戻り値のRangeオブジェクトのフィールドであるidを引数に渡せば消すことができます。

editor.js
session.removeMarker(range.id);

highlightLinesを使ったのにremoveMarkerメソッドで消す理由は、
実はhighlightLinesメソッドの内部ではaddMarkerメソッドを呼び出しているからです。
そして、RangeオブジェクトにMarkerのidを付属させたものを戻り値としているようです。
参考: https://github.com/ajaxorg/ace-builds/blob/master/src/ace.js#L5977