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

More than 5 years have 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