ブラウザ上で動くACEというエディタ、Javascriptで書かれているのでブラウザで動きます。Webアプリなどに簡単に組み込めます。
試しに実装してみた。
http://www.katacom.jp/ace-builds-master/
DEMO用のファイルをすこし変更してアップロードしただけなので、ただ入力できるだけ。なんですが、「HTML」を入力してみてください。
いろいろ便利でしょ？
実装手順
- ダウンロード https://github.com/ajaxorg/ace-builds
- 展開。srcディレクトリの中身が実行ファイルです
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編集関連での使い方を紹介。
タグを入力
- 普通にタグを入力すると終了タグが自動的に入ります。
- あとは中身を入力するだけ
タグ間を移動
終了タグから開始タグに移動したいときなどに。。
- 終了タグにあるときに
- Ctrl+Alt+Shift+左 （MacはAltをOptionで）
- で開始タグに移動
複数タグを同時編集
いちばん感動したのは、Sublime textとかでよくある同時編集機能もデフォルトで使えること。
- 終了タグにカーソルがある状態で
- Ctrl+Alt+左 （MacはAltをOptionで）
- 左を押すたびにタグを移動してカーソルが複製されていきます。
- 編集したいタグ全部にカーソルが表示されたらあとは、編集するだけ。
- あとは、Ctrl+Alt+Shift+（右|左）を押して移動すると複製されたカーソルを解除しながらタグ間を移動します。
##行を複製
- コピーしたい行にカーソルがある状態で
- Ctrl+Shift+d
- 行がコピーされます
Javascript製のエディタでここまでできるんですね。
#参考記事
http://d.hatena.ne.jp/tsugehara/20130419/1366380767
http://blog.asial.co.jp/934