誰もがAceエディターについて知っていると思います。今日、AngularJSプロジェクトに構文強調コードエディターを固定する緊急の必要性がありました。この投稿に出くわしました-すぐにプロジェクトに添付しました。 私はそれが多くの初心者に役立つだろうと思った-私は翻訳することに決めた、利益は短い。 便宜上、jsfiddleで例を共有しました。
注-知名度の高い名前（IDEを含む）は元の記事から引用されています-実際、著者は感銘を受けました-これはAngularJSでAceを接続するための短くて便利なガイドです
翻訳：
過去数年間でWeb開発がどれだけ進歩したかを考えて停止するテクノロジーに出くわすことがあります。 私にとって、これらのテクノロジーの1つはAceプロジェクトでした。 彼に慣れていない場合は、Ase、これは「高性能Webコードエディター」です。 これにより、ユーザーがブラウザで直接コードを記述できるサイトを作成できます。 LearnAngularは 、Ace を幅広く活用しています。
この投稿では、AngularUIのモジュールを使用して、AceエディターをAngularJSアプリケーションに統合する方法について説明します。
ステップ1-コンポーネントの入手
最初に行う必要があるのは、タスクに必要な3つのライブラリを取得することです。
- AngularJS-angularjs.org、 Google Hosted Libraries 、 cdnjs 、
bower install angular
- エース-ace.c9.io 、 cdnjs 、
bower install ace
- ui-ace- GitHub 、
bower install angular-ui-ace\#bower
次に、アプリケーションでこれらのライブラリへのリンクを次の順序で作成します。
- Angularjs
- エース
- ui-ace
（約lane bowerはオプションで、スクリプトへのリンクを提供するだけです。ただし、すべてのAceモジュールを使用する場合は、リポジトリからsrc-noconflictディレクトリ全体をダウンロードします） 、アセンブリ
ステップ2-HTMLを書く
<div class="editor" ui-ace="{ mode: 'javascript', theme: 'monokai' }" ng-model="code"></div>
信じられないかもしれませんが、これはAceをサイトに統合するために必要なすべてのHTMLです。 私たちがやったことをすぐに見てみましょう。
すぐにわかるように、CSSを少し使用してエディターのサイズを構成できるように、 エディタークラスは単純に宣言されます。
ui-ace派生物は、divをAceエディターに変換します。 ここでパラメーターを渡して、プログラミング言語とテーマを設定します。 エースはたくさんの言語をサポートし、 かなりの数のテーマを持っています 。 Aceプロジェクトが実際に完全に機能する程度を完全に把握するには、少し時間をかけてそれらを研究することをお勧めします。
結論として、ユーザーがコードエディターで入力するすべてのものがAngular $ scopeに関連付けられるように、ユビキタスなngモデルの派生物を追加します 。
もちろん、これを使用して、デフォルトでエディターにテキストを表示させることもできます。
ステップ3-「ui-ace」ディレクティブをコントローラーモジュールに挿入する
angular.module("app", ['ui.ace']) .controller("controller", ["$scope", function($scope) { $scope.code = "alert('hello world');"; }]);
ステップ4-CSSに触れる
エディターに適用するCSSは、ページのサイズと位置を設定するために必要です。 前述のように、エディターの実際の外観はトピックによって決まります。
.editor { height: 200px; }
（およそ、この小さなコードセクションがないと、エディターはまったく表示されません-デフォルトの高さはありません）
ステップ5-試してみてください。
それだけです！ ほんの数行のコードで、非常にリッチなコードエディターをWebページに統合しました。ユーザーが作成したコードを使用して、好きなことを続行できます。 私の意見はとてもクールです！
自分から。 AngularJSのディレクティブとして設計された1つのエディター（これも使用）に別のリンクを追加しました。 タスクは明らかに単純ですが、AngularJSに組み込まれているすべてのエディターが予測どおりに動作するとは限りません。 たとえば、私たちのプロジェクトのTinyMiceは開発モードで適切に機能し、エンドユーザーに対してほぼ 1回実行されました。 すべてが読み込まれましたが、エディターはありません。 具体的には、この場合、これはそのサイズと非同期ロードのためであるという結論に達しました。
開始設定とコンテンツのデモンストレーションを含むページの最終ビュー（Aceが余分なものを追加しないことは明らかです）：
<!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .ace_editor { height: 200px; } </style> </head> <body> <div class="editor" ui-ace="{ mode: 'javascript', theme: 'monokai',onLoad:load }" ng-model="code"></div> <h3></h3> <br/> {{code}} <hr/> <script language = "javascript" src="angular/angular.min.js"></script> <script language = "javascript" src="src-noconflict/ace.js"></script> <script language = "javascript" src="src-noconflict/ext-language_tools.js"></script> <script language = "javascript" src="src-noconflict/mode-snippets.js"></script> <script language = "javascript" src="src-noconflict/snippets/javascript.js"></script> <script language = "javascript" src="ui-ace.js"></script> <script language = "javascript"> angular.module("app", ['ui.ace']) .controller("controller", ["$scope", function($scope) { var langTools = ace.require("ace/ext/language_tools"); $scope.code = "alert('hello world');"; $scope.load = function(_editor) { _editor.setOptions({ enableBasicAutocompletion:true, enableSnippets:true, enableLiveAutocompletion: false }); }; }]); </script> </body> </html>
さらに作業中-Aceライブラリのすべての設定と作業は_editorを介して行われます