簡単にブラウザに埋め込めるWebテキストエディタ “Ace” を使ってみる
初めまして、酒巻と申します。
Monacaチームでは、主にMonaca IDEの開発を担当しております。
今回は、Monaca IDEで利用しているWebテキストエディタ “Ace” を紹介したいと思います。
Aceは、Cloud9 IDEという、クラウド上でのシステム開発を実現する開発環境サービスで採用されているエディタで、JavaScriptで作られています。
Aceはブラウザ上で動作し、基本的なテキスト編集はもちろん、
- 検索や置換、元に戻す、行削除や行移動などの機能
- VimやEmacsのキーバインディングの利用
- HtmlやJavaScriptなどのシンタックスハイライト
- Web上に容易に埋め込みが可能
などのすぐれた特徴を持っています。
今回は、実際にWebページにAceを埋め込んで利用するまでの手順を紹介します。
ダウンロード
まず、Aceのソースコードをダウンロードします。
Aceはオープンソースで、GitHubで公開されています。
まず、AceのGitHubにアクセスします。
そして、下の図のように「ZIP」ボタンをクリックし、ダウンロードします。
ダウンロードしたファイルを解凍すると様々なファイルが格納されていますが、今回利用するのは、”build”ディレクトリの中にある “src” ディレクトリのみです。
このディレクトリには、ビルドされたAceのソースコードが入っています。その他のディレクトリには、デモやビルド前のソースコードなどが入っています。
埋め込み
次に、AceをHtmlに埋め込みます。
適当なHtml(仮に ace.html とします)を作成し、先ほどのsrcディレクトリと同じ位置に置きます。
そして、ace.htmlを以下のように編集します。
<html>
<head>
</head>
<body>
<div id="editor-div" style="height: 500px; width: 500px">ここがエディタになります</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
var editor = ace.edit("editor-div");
};
</script>
</body>
</html>
編集したら、htmlファイルを開き、エディタが表示されているか確認してみてください。
Ctrl+Fで検索、Ctrl+Lで行移動、Ctrl+Zで元に戻すなど、様々な機能が使えます。
その他、どのようなショートカットキーがあ るかについては、こちらを参照してください。 (英語)
また、編集結果を取得して利用したい場合は、JavaScriptで
editor.getSession().getValue();
とすることで取得することができます。
—-
たったこれだけの手間で、自分のサイトで高機能のエディタを利用することができます。今回紹介した機能以外にも、Aceは様々な機能を持っています。さらに拡張性も高く、容易に機能を追加することが可能です。
Webサービスを開発するときなど、活用してみてはいかがでしょうか？
