ブラウザ埋込み型のJavascriptエディタ「ACE」を実装してみた。

2015-10-02
この記事は結構見てくださっている方が多いこともあり、すこし修正して
Qiitaにて公開しました。

http://qiita.com/shin1kt/items/48ed9c5d3d485757d19b
こちらも合わせてどうぞ。


最近Chromebookをいじってばかりいるせいで、ブラウザ上で動くエディタとかにとても興味がでてきて、いろいろ試しています。
Cloud9とかすごいですね。うまく使えばいろいろな開発環境が劇的にかわるかもとか思い始めています。
「あぁ、もうそういう時代がきているのね感」みたいのを日々感じる今日このごろ。

そんな中、Cloud9のエディタがすげー便利だな。。なんかWindowsやMacで使われているSublimeTextみたいなことがJavascriptエディタでできるなんて。。とか感じていたのですが、どうやら「ACE」というJavascriptエディタをつかっているらしい。とのことで、すごく興味がわきさっそくですが自分のサーバに実装してみました。

まずはこちらを御覧ください。
https://www.katacom.jp/a/ace-builds-master/editor.html
DEMO用のファイルをすこし変更してアップロードしただけなので、ただ入力できるだけ。
なんですが、「HTML」を入力してみてください。
いろいろ便利でしょ?

Javascriptエディタ「ACE」HTML入力の使い方例

タグを入力

  1. 普通にタグを入力すると終了タグが自動的に入ります。
  2. あとは中身を入力するだけ

タグ間を移動

終了タグにカーソルがあるときに、開始タグに一気に移動したいときとか。。

  1. 終了タグ内にカーソルがある状態で
  2. Ctrl+Alt+Shift+左 (MacはAltをOptionで)
  3. で開始タグに移動

複数タグを同時編集

例えばulで囲ってたけど、olに変えたいなという感じのとき

  1. 終了タグにカーソルがある状態で
  2. Ctrl+Alt+左 (MacはAltをOptionで)
  3. 左を押すたびにタグを移動してカーソルが複製されていきます。
  4. 編集したいタグ全部にカーソルが表示されたらあとは、編集するだけ。
  5. あとは、Ctrl+Alt+Shift+(右|左)を押して移動すると複製されたカーソルを解除しながらタグ間を移動します。

行をコピー

  1. コピーしたい行にカーソルがある状態で
  2. Ctrl+Shift+d
  3. で、行がコピーされます

てな感じで、HTMLタグ編集も楽々です。
その他ショートカットキーは
https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts

こちらで確認できます。

Javascriptエディタでここまでできるんですねぇ。。

というわけで、実装してみます。

javascriptエディタ「ACE」を実装してみる。

  1. ダウンロード
    https://github.com/ajaxorg/ace-builds
    ここに、使いやすくまとまったコードがありますので、まずはそれを。
  2. そしたら展開。
  3. editor.html というのがDEMOファイルになっています。
  4. まずは、editor.html を少しいじります。
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>Editor</title>
      <style type="text/css" media="screen">
        body {
            overflow: hidden;
        }
    
        #editor {
            margin: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
      </style>
    </head>
    <body>
    
    <pre id="editor">
    エディタにデフォルトで入れたいコードはココに書く
    </pre>
    
    <script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/html");
    </script>
    </body>
    </html>
    
  5. 上記をそのままコピーしても大丈夫だと思いますが、ポイントは、
    • 28行目:src/ace.js を参照するようにします。
    • 31行目:テーマを決めます。SublimeText風にしたいので、monokaiを指定
    • 32行目:モードを決めます。今回はHTMLモードにします。

    テーマやモードは、srcフォルダの中に theme-●●.js 、mode-●●.jsが準備されていますので、そこからいろいろお試しください。

  6. editor.html と srcフォルダ をアップロードして、editor.htmlにアクセスします。
  7. というだけの作業で公開されるのが、
    https://www.katacom.jp/ace-builds-master/editor.html
    です。

あとは、この値を取得してあれこれとか、これを利用してWebサービスのあの部分に使おうとか。いろいろとアイディアが湧き出てきそうですね。
まずは、今回実装まで。
今後いろいろといじっていきたいと思います。

参考にさせていただいたサイトは
http://d.hatena.ne.jp/tsugehara/20130419/1366380767
http://blog.asial.co.jp/934
です。ありがとうございます。m(_ _)m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です