JavaScript
エディタ
Ace
ブラウザエディタ

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

More than 1 year has passed since last update.

ブラウザ上で動くACEというエディタ、Javascriptで書かれているのでブラウザで動きます。Webアプリなどに簡単に組み込めます。


試しに実装してみた。

http://www.katacom.jp/ace-builds-master/

DEMO用のファイルをすこし変更してアップロードしただけなので、ただ入力できるだけ。なんですが、「HTML」を入力してみてください。

いろいろ便利でしょ?


実装手順


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>



  • 上記をそのままコピーしても大丈夫だと思いますが、ポイントは、

    28行目:src/ace.js を参照するようにします。

    31行目:テーマを決めます。SublimeText風にしたいので、monokaiを指定

    32行目:モードを決めます。今回はHTMLモードにします。

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


  • あとは、入力した値を受け取っていろいろ・・・とアイディアが湧いてきますね。



ACEの基本的な使い方

一応基本的な使い方を紹介しておきます。CMSのエディタ的なのに使えそうなので、HTML編集関連での使い方を紹介。


タグを入力


  1. 普通にタグを入力すると終了タグが自動的に入ります。

  2. あとは中身を入力するだけ


タグ間を移動

終了タグから開始タグに移動したいときなどに。。

1. 終了タグにあるときに

2. Ctrl+Alt+Shift+左 (MacはAltをOptionで)

3. で開始タグに移動


複数タグを同時編集

いちばん感動したのは、Sublime textとかでよくある同時編集機能もデフォルトで使えること。


  1. 終了タグにカーソルがある状態で

  2. Ctrl+Alt+左 (MacはAltをOptionで)

  3. 左を押すたびにタグを移動してカーソルが複製されていきます。

  4. 編集したいタグ全部にカーソルが表示されたらあとは、編集するだけ。

  5. あとは、Ctrl+Alt+Shift+(右|左)を押して移動すると複製されたカーソルを解除しながらタグ間を移動します。


行を複製


  1. コピーしたい行にカーソルがある状態で

  2. Ctrl+Shift+d

  3. 行がコピーされます

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


参考記事

http://d.hatena.ne.jp/tsugehara/20130419/1366380767

http://blog.asial.co.jp/934