Help us understand the problem. What is going on with this article?

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

More than 3 years have 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

shin1kt
webまわり php,html,css,javascript laravel,vue.js.jquery,wordpress,cakephp,yii,ec-cube他
http://www.katacom.jp/a/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away