AngularJSで ACE Editorを使う

JavaScript

ブラウザ上で動作するテキストエディタとして広く使われている ACE Editorを AngularJSに統合してデータバインド機構に対応させる

AngularJSへの UIコンポーネント統合を支援するプロジェクトであるAngularUIのサブプロジェクトとして angular-ui/ui-ace というものがあり、これを使えば ACE Editorを AngularJSと統合することができる。ui-aceを有効にするには ace.jsの後に ui-ace.jsをロードするほか、"ui.ace" をアプリケーションモジュールにインジェクトする。

あとは ui-ace 属性をつけた div要素を HTML内の任意の箇所へ設置する(ことに加え、div要素にheightスタイルを適用することで高さを指定する)ことでそこがテキストエディタとなる。この div要素は ng-model属性で AngularJSのスコープ変数とバインドできるため、AngularJSのコンテキストからは ACEの APIを呼び出すことなく透過的にエディタ内のテキストへアクセスすることができる。

以下は、動的なプレビューに対応した HTMLエディタを即席に作成した例だ。AngularJSのデータバインディング機構があるお陰で非常に短いコードで実現できている。

サンプルソース

<html lang="ja" ng-app="MyApp">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-sanitize.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"></script>
    <script src="http://assets.walbrix.com/js/ui-ace.js"></script><!--自分のサーバに置き直すこと-->
    <title>AngularJSとACE Editorを使ったリアルタイムプレビュー付きHTML編集</title>
    <script language="javascript">
      angular.module("MyApp", ["ngSanitize","ui.ace"])
        .run(["$rootScope", function($scope) {
          $scope.edit = "<p class='lead'>記事要約</p>\n<p>本文...</p>";
        }]);
    </script>
  </head>
  <body>
    <div class="container">
      <h2>HTMLを入力</h2>
      <div style="height: 200px;" ng-model="edit"
	   ui-ace="{useWrapMode : true,mode:'html',theme:'twilight'}"></div>
      <h2>プレビュー</h2>
      <div style="background-color:eee;padding:1em;" 
	   ng-bind-html="edit"></div>
    </div>
  </body>
</html>

Safariでカーソルがずれる場合

AngularJSとは関係ないが、ACE Editorを Safariで利用したときにカーソルがずれる場合は、(ACE Editor側で対応が行われるまでの過渡的措置として)GitLab内のEditor(Ace)で,Safari7.0でのカーソル表示の不具合の解消 - Qiita [キータ] を参考に com.apple.Safari.ContentPageGroupIdentifier.WebKit2ScreenFontSubstitutionEnabled を有効にすると良い。

参考記事

AngularJS で HTML をエスケープさせずに出力するには - AngularJS Ninja - HTMLのプレビュー周りで

同じカテゴリの記事

Angular.JSでselect要素にoptionをぶら下げる色々な方法 2014年3月29日
AngularJSで、時間のかかる通信の間にモーダルを使ってプログレスバーを表示する 2014年3月18日
HTML5アプリケーションでの、サーバとクライアントの時差について 2014年3月17日
AngularJSの $resourceを使って application/x-www-form-urlencoded 形式のリクエストを POSTする 2014年3月15日
AngularJSと UI Bootstrapで日付と時刻の入力をする 2014年3月14日

お勧めカテゴリ

英語でアニメ観ようず
なじみ深い日本製アニメの英語版DVDで、字幕と音声から英語を学びましょうという趣旨のシリーズ記事です。
ScalaのようでJavaだけど少しScalaなJSON API
Scalaと Spring Frameworkを使って REST的なJSON APIを実装してみましょう。
ドクジリアン柔術少女 すから☆ぱいそん
代表 嶋田大貴のブログです。写真は神仏に見せ金をはたらく罰当たりの図