2011年12月12日
ace editorをカスタマイズしてもっと便利に
酒巻です。
今回は、ace editorをカスタマイズして、より使いやすくするための方法について紹介します。
１．シンタックスハイライト
ace editorは、デフォルトjava, C++, php, html, css, javascript, python, rubyなど、多くの言語用のシンタックスハイライト機能を備えています。
使い方はごく簡単で、
<script src="ace/mode-html.js"></script>
でシンタックスハイライトパターンが記述されたファイルを読み込み、
<code>var editor = ace.edit("editor-div");
editor.getSession().setMode("ace/mode/html").Mode; </code>
とするだけです。
２．テーマ設定
テーマを設定することも出来ます。同様に、
<script src="ace/mode-twilight.js"></script>
でテーマを読み込み、
editor.getSession().setTheme("ace/theme/twilight");
とします。
３．ショートカットキーの自作
人間の心理として、エディタでCtrl + S もしくは Command + S を押したら保存したいですよね。
そういうときは、
editor.commands.addCommand(
Name : "savefile",
bindKey: {
win : "Ctrl-S",
mac : "Command-S"
},
exec: function(editor) {
onSaveFile();
}
});
とすると、Ctrl + S もしくは Command-S を押したときに onSaveFile が実行されます。簡単ですね。
ショートカットキーの設定は、昔のバージョンではもう少しややこしかったのですが、最近のアップデートでとても簡単になりました。
４．イベントハンドリング
ace editorはイベントハンドリングも容易です。
editor.getSession().on('change', function(){
alert("change in my world!");
});
とするだけです。これで文字入力時にアラートがでます（ちょっとうざい）。
ace editorから受け取れるイベントは、他にも選択の変更、カーソルの移動などがあります。
---------------
このように、ace editorは簡単な記述でカスタマイズをすることができます。また、シンタックスハイライトやテーマなどを自作するときも、そこまで苦労せず自作できると思います。
