login4all 22 июл 2014 в 21:14

Одностраничная IDE в браузере [AngularJS/Ace]

4 мин

10K

Веб-разработка*Angular*

Туториал

Перевод

Автор оригинала: Levi Botelho

Про редактор Ace, думаю знают все, а сегодня у нас возникла срочная необходимость прикрутить редактор кода с подсветкой синтаксиса к проекту на AngularJS, наткнулся на этот пост — действительно быстро привязал к проекту. Подумал будет полезно многим новичкам — решил перевести, благо короткий. Для удобства расшарил пример в jsfiddle.
Примечание — громкое название (включающее IDE) взято из оригинала статьи — автор был под впечатлением, фактически — это краткое и удобное руководство по подключению Ace в AngularJS
Перевод:
Иногда ты сталкиваешься с технологией которая заставит остановиться и задуматься о том как далеко продвинулась веб разработка в последние несколько лет. Для меня одной из таких технологий стал проект Ace. Если Вы незнакомы с ним, Асе, это «высокопроизводительный редактор кода для веба». Он позволяет Вам создавать сайты позволяющие пользователю писать код непосредсвено в их браузере. LearnAngular широко использует Ace.

В этом посте мы рассмотрим как интегрировать редактор Ace в приложение AngularJS с помощью модуля от AngularUI.

Шаг 1 — Получаем компоненты

Первое, что мы должны сделать, это получить три необходимые для задачи библиотеки:

AngularJS — angularjs.org, Google Hosted Libraries, cdnjs,
```
bower install angular
```
Ace — ace.c9.io, cdnjs,
```
bower install ace
```
ui-ace — GitHub,
```
bower install angular-ui-ace\#bower
```

После сделайте ссылки на эти библиотеки в Вашем приложении следующем порядке:

AngularJS
Ace
ui-ace

(прим. пер. bower использовать необязательно, достаточно указать ссылки на скрипты. Но если Вы захотите использовать все модули Ace скачайте весь каталог src-noconflict из репозитория) со сборками

Шаг 2 — напишите HTML

<div class="editor" ui-ace="{ mode: 'javascript', theme: 'monokai' }" ng-model="code"></div>

Верите или нет, это весь HTML который необходимый Вам для интеграции Ace в Ваш сайт. Давайте быстро просмотрим, что мы сделали.
Класс editor просто объявляется, для того чтобы мы могли сконфигурировать размер редактора используя чуток CSS, как — мы вскоре увидим.
Дериктива ui-ace преобразует наш div в редактор Ace. Здесь мы передаем ему параметры, чтобы задать язык программирования и тему. Ace поддерживает тонну языков и имеет довольно много тем. Лучше потратить немного времени на их изучение для получения полноценного представления о том на сколько действительно проект Ace полнофункционален.
В заключении мы добавляем вездесущую дериктиву ng-model так что все, что пользователь набирает в редакторе кода связано с нашей областью Angular $scope.
Очевидно, что мы можем также это использовать для того чтобы редактор по умолчанию отображал какой нибудь текст.

Шаг 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 — Попробуйте его.

Вот и все, что нужно делать! Просто несколько строк кода и мы интегрировали чрезвычайно богатый редактор кода в веб-страницу, и можно продолжать и делать все, что мы хотели бы с кодом который пишут наши пользователи. Моё мнение — очень круто!

От себя. Добавил ещё ссылку на один редактор (который тоже сами используем) оформленный как директива для AngularJS. Не смотря на кажущуюся простоту задачи не все встраиваемые в AngularJS редакторы ведут себя предсказуемо. Например TinyMice в наших проектах исправно работал в режиме разработки и ч/з раз запускался у конечных пользователей, т.е. всё загрузилось, а редактор нет. Конкретно в данном случае пришли к выводу что это из-за его размера и оасинхронной загрузки.
Итоговый вид страницы с инициирующими настройками и демонстрацией содержимого (видно что 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

Ссылки

Хабы: