ACEエディターを使ってみる

なかなか不安定だけど未来を感じさせると自分の中で話題のサービス、Cloud9で使われているACEエディター(現時点でバージョンは1.1.3)の使いかたを調べてみた。ここでいう使い方とはACEエディターを使ったウェブページを作ること。ACE自体はライブラリとしてほかのサービスから使えるようになっている。ACEはエディターとは言ってもブラウザで動作するため、直接ローカルのファイルを読み書きするものではない。どちらかというとTEXTBOXタグが、プログラム言語を編集するために豪華になった感じだ。

ACEを使うだけなら数行のコードだけでできる。エディタを表示するためのPREタグを用意して、そのタグをエディターにするためにライブラリの呼び出しをして、プログラミング言語やテーマの設定をすればいい。Embedding GuideにもサンプルコードがあるがHTML全体でも30行ほどに収まる。ACE自体にデータをロード、セーブする機能はないので、JavaScriptからテキストを渡すことになる。

EditSessionやDocumentクラスを使うと一つのテキストを複数のエディターで編集できるようになる。EditorはUIを実装しテキストの表示やキー、マウスの入力を行う。EditSessionはカーソルの位置やテキスト選択を管理し、Documentは実際のテキストを保持する。Editor、EditSession、Documentクラスの関係は下の図のように、複数のEditorでEditSessionを共有したり、複数のEditSessionでDocumentを狂できるようになっている。

20140610-01

サンプルのコードでは左の2つのEditorはEditSessionを共有し、カーソルや選択が同期される。3つのEditorはすべて同じDocumentを編集するので編集内容は共有される。

20140610-02

エディターとして使うタグのスタイルにはposition relativeかabsoluteを設定し、width、heightを明示的に設定する必要がある。

…/min/ace.jsはrequireやdefineなどAMDで使われる関数をグローバルに宣言するためDoJoなどrequireやdefineを定義するライブラリと衝突する。…/noconflict/ace.jsを使うと、ace.requireやace.defineを使ってくれるので衝突を回避できる。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>ACEテスト</title>
        <style type="text/css">
            .editor {
                border: 2px solid gray;
                float: left; position: relative;
                width: 250px; height: 150px;
            }
        </style>
    </head>
    <body>
        <h1>ACEテスト</h1>
        <pre id="editor1" class="editor"></pre>
        <pre id="editor2" class="editor"></pre>
        <pre id="editor3" class="editor"></pre>
        <script src="//cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js"></script>
        <script src="//cdn.jsdelivr.net/ace/1.1.3/noconflict/ace.js"></script>
        <script type="text/javascript">
            $(function () {
                var editors = ([1, 2, 3]).map(function (i) {
                    return new ace.edit("editor" + i);
                });
                // このページをテキストとして取得
                $.get(window.location, null, function (data) {
                    var session1 = new ace.createEditSession(data);
                    session1.setMode("ace/mode/html");

                    // 2つのセッションは1つのテキストを共有
                    var session2 = new ace.createEditSession(session1.getDocument());
                    session2.setMode("ace/mode/html");

                    // 2つのエディターは1つのセッションを共有
                    editors[0].setSession(session1);
                    editors[1].setSession(session1);

                    editors[2].setSession(session2);
                });
            })
        </script>
    </body>
</html>

紹介 kiidax
元、環境非依存な職業プログラマー。Blenderで遊んでいます。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。