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

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

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

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

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

• AngularJS — angularjs.org ^[2], Google Hosted Libraries ^[3], cdnjs ^[4],

  bower install angular
  

• Ace — ace.c9.io ^[5], cdnjs ^[6],

  bower install ace
  

• ui-ace — GitHub ^[7],

  bower install angular-ui-ace#bower
  

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

1. AngularJS
2. Ace
3. ui-ace

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

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

Верите или нет, это весь HTML который необходимый Вам для интеграции Ace в Ваш сайт. Давайте быстро просмотрим, что мы сделали.
Класс editor просто объявляется, для того чтобы мы могли сконфигурировать размер редактора используя чуток CSS, как — мы вскоре увидим.
Дериктива ui-ace преобразует наш div в редактор Ace. Здесь мы передаем ему параметры, чтобы задать язык программирования и тему. Ace поддерживает тонну языков ^[8] и имеет довольно много тем ^[9]. Лучше потратить немного времени на их изучение для получения полноценного представления о том на сколько действительно проект 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

Ссылки

• Этот код в jsfiddle ^[10]
• Проект ui-ace
• Ace editor ^[5]
• textAngular ^[11]

Автор: login4all

Источник ^[12]