アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

ace editorをカスタマイズしてもっと便利に

酒巻です。

今回は、ace editorをカスタマイズして、より使いやすくするための方法について紹介します。

1.シンタックスハイライト


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>

とするだけです。

 

2.テーマ設定


テーマを設定することも出来ます。同様に、


<script src="ace/mode-twilight.js"></script>

でテーマを読み込み、


editor.getSession().setTheme("ace/theme/twilight");

とします。



3.ショートカットキーの自作


人間の心理として、エディタで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 が実行されます。簡単ですね。

ショートカットキーの設定は、昔のバージョンではもう少しややこしかったのですが、最近のアップデートでとても簡単になりました。

 

4.イベントハンドリング


ace editorはイベントハンドリングも容易です。


editor.getSession().on('change', function(){
  alert("change in my world!");
});

とするだけです。これで文字入力時にアラートがでます(ちょっとうざい)。

ace editorから受け取れるイベントは、他にも選択の変更、カーソルの移動などがあります。

---------------

このように、ace editorは簡単な記述でカスタマイズをすることができます。また、シンタックスハイライトやテーマなどを自作するときも、そこまで苦労せず自作できると思います。