Webベースのソースコードエディタ「EditArea」を使ってみた

EditAreaはJavaScriptで書かれたWebベースのソースコードエディタライブラリです。これを使うと、以下に示す機能(EditArea - Aboutより抜粋)を持つリッチなコードエディタを、Webサイトにさくっと追加できます。

リアルタイムシンタックスハイライト
- PHP, CSS, Javascript, Python などに対応。
検索/置換機能
オートインデント
タブでの複数ファイル編集
フルスクリーンモード
複数言語のサポート(日本語もOK)

注:エディタのUIのみを提供するライブラリです。編集したデータの保存やデータの読み込みは独自で(ストレージに保存したければCGIなどを書いて)行なう必要があります。

ということで、いくつかサンプルなどを書いてみました。

エディタの構築手順

EditAreaでエディタを構築する手順は次のようになります。

ダウンロードしたアーカイブに含まれる「edit_area_full.js」をインポートする。
編集領域とするテキストエリアを用意する。
EditAreaの初期化関数を実行
- 引数で2.で作成したテキストエリアのIDと各種オプションを指定します。
- 設定可能なオプションの一覧はこちらを参照。

基本的な設定のみを行なったシンプルなエディタは以下の通り。

次の設定のみ行なっています。
- シンタックスハイライトを行なうかどうか? .. 行なう
- シンタックスハイライトの対象とする言語 .. ruby (EditArea - Aboutでは省略されていますが、rubyにも対応しています。)
- 言語 .. ja
- 元のテキストエリアとedit_areaの切り替え .. off

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>edit_area のサンプル1</title>
    <script type="text/javascript" src="edit_area/edit_area_full.js"></script>
    <script type="text/javascript">
      editAreaLoader.init({
        id : "textarea_1",        // テキストエリアのID
        syntax: "ruby",           // シンタックスハイライトの対象とする言語
        start_highlight: true,    // シンタックスハイライトを行なうかどうか?
        language: "ja",           // 言語
        allow_toggle: false       // 元のテキストエリアとedit_areaを切り替える機能をoff
      });
    </script>
  </head>
  <body>
    <textarea id="textarea_1" name="content" cols="80" rows="15">
puts "Hello World."</textarea>
  </body>
</html>

実行結果はこちら

ツールバーをカスタマイズしてみる

「toolbar」オプションの設定で、ツールバーの表示項目をカスタマイズできます。

"search", "go_to_line", "undo", "redo", "change_smooth_selection", "reset_highlight", "highlight", "word_wrap", "help", "save", "load", "new_document", "syntax_selection", "select_font", "fullscreen", "|", "*" を","区切りで連結して指定。
"|"がセパレータで、
"*"が改行になります。

以下は、利用可能な機能をツールバーに全て表示してみた例です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>edit_area のサンプル2</title>
    <script type="text/javascript" src="edit_area/edit_area_full.js"></script>
    <script type="text/javascript">
      editAreaLoader.init({
        id : "textarea_1",
        syntax: "ruby",
        start_highlight: true,
        language: "ja",
        allow_toggle: false,
        // ツールバーの設定。使える機能を全部表示してみる。
        toolbar: "save, load, new_document, |, search, go_to_line, fullscreen, |, undo, redo, *, syntax_selection, reset_highlight, highlight, word_wrap, change_smooth_selection, select_font, |, help "
      });
    </script>
  </head>
  <body>
    <textarea id="textarea_1" name="content" cols="80" rows="15">
puts "Hello World."</textarea>
  </body>
</html>

実行結果はこちら。

イベントをハンドリングする

ツールバーの「保存」や「読み込み」はデフォルトでは押しても何も実行されませんが、対応するイベントハンドラをオプションで指定しておくことで、任意の処理を実行させるようにできます。

オプション設定と同様に、EditAreaの初期化時の引数として、イベントハンドラとする関数の名前を指定すればOK。
キーにできるイベントの一覧はEditArea - configurationの下の方にあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>edit_area のサンプル3</title>
    <script type="text/javascript" src="edit_area/edit_area_full.js"></script>
    <script type="text/javascript">
      editAreaLoader.init({
        id : "textarea_1",
        syntax: "ruby",
        start_highlight: true,
        language: "ja",
        allow_toggle: false
      });

      // edit_areaで編集された文字列を取得して表示する。
      function showContent(){
        alert( editAreaLoader.getValue("textarea_1") );
      }

      // edit_areaで編集された文字列を取得して表示する。
      function showSelection(){
        alert( editAreaLoader.getSelectedText("textarea_1") );
      }
    </script>
  </head>
  <body>
    <textarea id="textarea_1" name="content" cols="80" rows="15">
puts "Hello World."</textarea>
    <div>
      <a href="javascript:showContent();">edit_areaで編集された文字列を表示する</a>
      | <a href="javascript:showSelection();">edit_areaで選択された文字列を表示する</a>
    </div>
  </body>
</html>

実行結果はこちら。

JavaScript APIを使う

外部からEditAreaで編集した文書を取得したり、編集中の文書を変更したりするためのJavaScriptAPIが用意されています。

使用可能なAPI一覧はこちらにあります。

APIを使ってedit_areaで編集 or 選択された文字列を表示するサンプルを書いてみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>edit_area のサンプル4</title>
    <script type="text/javascript" src="edit_area/edit_area_full.js"></script>
    <script type="text/javascript">
      editAreaLoader.init({
        id : "textarea_1",
        syntax: "ruby",
        start_highlight: true,
        language: "ja",
        allow_toggle: false,
        toolbar: "load, save, |, search, go_to_line, fullscreen, |, undo, redo, |, help ",

        // ツールバーの「読み込み」や「保存」ボタンが押された場合に実行される関数を指定。
        // ちなみに、関数を直接指定することはできない模様
        load_callback: "loaded",
        save_callback: "saved"
      });

      // ツールバーの「読み込み」や「保存」ボタンが押された場合に実行される関数
      function loaded( editor_id ){
        document.getElementById("stdout").innerHTML += "loaded.<br/>"
        editAreaLoader.setValue(editor_id, "#新しい文書");
      }
      function saved( editor_id, content ){
        document.getElementById("stdout").innerHTML += "saved.<br/>"
      }
    </script>
  </head>
  <body>
    <textarea id="textarea_1" name="content" cols="80" rows="15">
puts "Hello World."</textarea>
    <div id="stdout"></div>
  </body>
</html>

実行結果はこちらです。

複数の文書をタブで切り替えて編集できるようにする

EditAreaでは、複数の文書をタブで切り替えつつ同時に編集できるようにするモードが提供されています。同時編集を可能にするには、

エディタ初期化時のオプションで「is_multi_files」を「true」にした上で、
JavaScript APIの「editAreaLoader.openFile()」関数を実行しタブを追加する

必要があります。具体的には、以下のような感じになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>edit_area のサンプル5</title>
    <script type="text/javascript" src="edit_area/edit_area_full.js"></script>
    <script type="text/javascript">
      editAreaLoader.init({
        id : "textarea_1",
        syntax: "ruby",
        start_highlight: true,
        language: "ja",
        allow_toggle: false,
        toolbar: "save, |, search, go_to_line, fullscreen, |, undo, redo, |, help ",

        // タブでの複数ファイル編集を行なう。
        is_multi_files: true,

        // コールバック関数の設定
        save_callback: "saved",
        EA_file_close_callback: "closed"
      });

      // タブを新規に作成する関数
      function open( name ){
        editAreaLoader.openFile("textarea_1", {
          id : name,
          title : name,
          text : name + " conent."
        });
      }
      // 現在、タブで編集しているデータを表示する関数
      function showContent(){
        var file = editAreaLoader.getCurrentFile("textarea_1");
        alert( file.text )
      }

      // データが保存されると呼び出されるコールバック関数
      function saved( editor_id, content ){
        // 引数としては、どのファイルが保存されたかは渡ってこないので、
        // 現在編集中のファイルが保存されたものと見なす。
        var file = editAreaLoader.getCurrentFile("textarea_1");
        document.getElementById("stdout").innerHTML += file.title + " is saved.<br/>"
        // 保存に成功したら、編集状態を解除(タイトルの「*」を消す)
        editAreaLoader.setFileEditedMode(editor_id, file.id, false);
      }
      // タブがクローズされると呼び出されるコールバック関数。
      function closed( file ){
        document.getElementById("stdout").innerHTML += file.title + " is closed.<br/>"
      }

    </script>
  </head>
  <body>
    <div>
      ファイルを開く :
      <a href="javascript:open( 'a' );">a</a>
      <a href="javascript:open( 'b' );">b</a>
      <a href="javascript:open( 'c' );">c</a>
    </div>
    <textarea id="textarea_1" name="content" cols="80" rows="15">
puts "Hello World."</textarea>
    <div>
      <a href="javascript:showContent();">現在のタブで編集中の文字列を表示する</a>
    </div>
    <div id="stdout"></div>
  </body>
</html>

実行結果はこちら。