JavaScript製のWebベースエディタ「Ace」が良さげ。

| コメント(0) | トラックバック(0)

Aceエディタ

BSD licenseで公開されています。110以上の言語の Syntax highlighting に対応しており、組み込みも簡単。気に入ったのは特に以下。

  • 動作が軽い
  • 自動補完(閉じ括弧とか)
  • 検索・置換に対応(Command(Ctl)+F)
  • タブインデントに対応。複数行を選択して、Tab押下。Shift+Tabキーでタブインデント下げ
  • シンタックス・チェック (警告表示)

シンタックス・チェック(警告表示も)

ドキュメントを見る限りキーバインドのカスタマイズや様々な拡張もできる模様。

インストールと組み込みについて

ダウンロードは、ace-build から。自分でビルドしてもいいですが、取り敢えずはここから。

組み込みは以下のように。

<script src="/ace/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/ace/src/theme-cobalt.js" type="text/javascript" charset="utf-8"></script>
 // 利用するテーマを読み込む

<div id="editor-div" style="height: 300px; width: 100%;"></div>

<!--↑エディタ-->
<!--↓入力されたテキストを突っ込むテキストエリア-->

<textarea id="text" name="text"></textarea>

<script type="text/javascript">
    document.getElementById( 'text' ).style.display = 'none';
    document.getElementById( 'editor-div' ).innerHTML = document.getElementById( 'text' ).value;
    // or editor.setValue( "the new text here" ); 
    var editor = ace.edit( 'editor-div' );
    editor.setTheme( 'ace/theme/cobalt' );
    editor.getSession().setMode( 'ace/mode/perl' );
    document.getElementById( 'editor-div' ).style.fontSize = '14';
    editor.getSession().on('change', function(){
        var textcode = editor.getSession().getValue();
        document.getElementById( 'text' ).value = textcode;
    });
</script>

画像のテーマは cobalt。GitHubとかTerminalとかDreamweaverとかXcodeとか。TextMate/Sublime Text の tmlanguageファイルをインポートすることもできます。

トラックバック(0)

トラックバックURL: http://junnama.alfasado.net/cgi/mt/mt-tb.cgi/839

コメントする

Facebook

Twitter

このブログ記事について

このページは、Junnama Nodaが2014年5月27日 10:34に書いたブログ記事です。

ひとつ前のブログ記事は「PHPerのためのMovable Type講座(その15)」です。

次のブログ記事は「記事がHogeされたらHugaするMTのプラグインを作るときに。」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 6.2.6