Geekly Articles each Day
📜 ⬆️ ⬇️

One-page IDE in the browser [AngularJS / Ace]


About Ace editor, I think everyone knows, and today we have an urgent need to tie the code editor with syntax highlighting to the project on AngularJS, came across this post - really quickly tied to the project. I thought it would be useful for many newcomers - I decided to translate, the benefit is short. For convenience, I shared an example in jsfiddle.
Note - a loud title (including IDE) is taken from the original article - the author was impressed, in fact - this is a short and convenient guide for connecting Ace to AngularJS
Transfer:
Sometimes you come across technology that makes you stop and think about how far web development has come in the last few years. For me, one of these technologies was the Ace project. If you are unfamiliar with it, Ace, this is a “high-performance code editor for the web.” It allows you to create websites that allow the user to write code directly in their browser. LearnAngular makes extensive use of Ace.

In this post, we will look at how to integrate the Ace editor into the AngularJS application using the module from AngularUI.

Step 1 - Get the components


The first thing we need to do is get the three necessary libraries for the task:

Then link to these libraries in your application in the following order:
  1. AngularJS
  2. Ace
  3. ui-ace

(note lane. bower is not necessary to use, it is enough to specify links to scripts. But if you want to use all Ace modules, download the entire src-noconflict directory from the repository)

Step 2 - Write HTML


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

Believe it or not, this is all the HTML you need to integrate Ace into your site. Let's quickly see what we have done.
The editor class is simply declared so that we can configure the size of the editor using a bit of CSS, as we will see shortly.
The ui-ace derivative converts our div into an Ace editor. Here we pass parameters to it to set the programming language and theme. Ace supports a ton of languages and has quite a few topics . It is better to spend some time studying them in order to get a complete idea of ​​how much Ace is fully functional.
Finally, we add the ubiquitous ng-model derivative so that everything the user types in the code editor is associated with our Angular $ scope .
Obviously, we can also use this for the editor to display some text by default.

Step 3 - Insert the “ui-ace” directive into your controller module


') 
 angular.module("app", ['ui.ace']) .controller("controller", ["$scope", function($scope) { $scope.code = "alert('hello world');"; }]);


Step 4 - Touching CSS


The CSS that we are going to apply to the editor is needed to set its size and position on our page. As mentioned earlier, the actual appearance of the editor is determined by the topic.
 .editor { height: 200px; }

(approx. trans. without this small section of code, the editor does not appear at all - there is no default height)

Step 5 - Try it.


That's all you need to do! Just a few lines of code and we have integrated an extremely rich code editor into a web page, and you can go on and do everything that we would like with the code that our users write. My opinion is very cool!

Push. Added another link to one editor (which we also use ourselves) designed as a directive for AngularJS. Despite the seeming simplicity of the task, not all editors embedded in AngularJS behave predictably. For example, TinyMice in our projects regularly worked in the development mode and it was launched from end users, i.e. everything is loaded, but the editor is not. Specifically, in this case, it was concluded that this is due to its size and asynchronous loading.
The final view of the page with the initiating settings and demonstration of the content (it is clear that Ace does not add anything extra):
 <!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>

Further, during operation, all settings and work with the Ace libraries occurs through the _editor

Links


Source: https://habr.com/ru/post/230749/

More articles:


All Articles