{"id":13647503,"url":"https://github.com/angular-ui/ui-ace","last_synced_at":"2025-04-22T02:31:57.069Z","repository":{"id":7756431,"uuid":"9124181","full_name":"angular-ui/ui-ace","owner":"angular-ui","description":"This directive allows you to add ACE editor elements.","archived":true,"fork":false,"pushed_at":"2017-06-30T14:11:18.000Z","size":2106,"stargazers_count":579,"open_issues_count":89,"forks_count":170,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-04-09T17:02:16.356Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://angular-ui.github.io/ui-ace","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-03-31T00:53:39.000Z","updated_at":"2025-02-27T13:29:54.000Z","dependencies_parsed_at":"2022-07-06T21:52:19.747Z","dependency_job_id":null,"html_url":"https://github.com/angular-ui/ui-ace","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-ace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-ace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-ace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-ace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-ui","download_url":"https://codeload.github.com/angular-ui/ui-ace/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248281414,"owners_count":21077423,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T01:03:36.544Z","updated_at":"2025-04-22T02:31:56.794Z","avatar_url":"https://github.com/angular-ui.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# UI.Ace directive [![Build Status](https://travis-ci.org/angular-ui/ui-ace.svg)](https://travis-ci.org/angular-ui/ui-ace)\n\nThis directive allows you to add [ACE](http://ajaxorg.github.io/ace/) editor elements.\n\n## Requirements\n\n- AngularJS\n- [Ace 1.x](https://github.com/ajaxorg/ace-builds/)\n\n\n## Usage\n\nYou can get it from [Bower](http://bower.io/)\n\n```sh\nbower install angular-ui-ace#bower\n```\n\nThis will copy the UI.Ace files into a `bower_components` folder, along with its dependencies. Load the script files in your application:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"bower_components/ace-builds/src-min-noconflict/ace.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"bower_components/angular/angular.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"bower_components/angular-ui-ace/ui-ace.js\"\u003e\u003c/script\u003e\n```\n\nAdd the UI.Ace module as a dependency to your application module:\n\n```javascript\nvar myAppModule = angular.module('MyApp', ['ui.ace']);\n```\n\nFinally, add the directive to your html:\n\n```html\n\u003cdiv ui-ace\u003e\u003c/div\u003e\n```\n\nTo see something it's better to add some CSS, like\n\n\n```css\n.ace_editor { height: 200px; }\n```\n\n## Options\n\nAce doesn't provide a one gate access to all the options the jquery way.\nEach option is configured with the function of a specific instance.\nSee the [api doc](http://ajaxorg.github.io/ace/#nav=api) for more.\n\nAlthough, _ui-ace_ automatically handles some handy options :\n + _showGutter_ : to show the gutter or not.\n + _useWrapMode_ : to set whether or not line wrapping is enabled.\n + _theme_ : to set the theme to use.\n + _mode_ : to set the mode to use.\n + _onLoad_ : callback when the editor has finished loading (see [below](#ace-instance-direct-access)).\n + _onChange_ : callback when the editor content is changed ().\n + _onBlur_ : callback when the editor is blurred ().\n + _firstLineNumber_ : to set the firstLineNumber (default: 1)\n\n```html\n\u003cdiv ui-ace=\"{\n  useWrapMode : true,\n  showGutter: false,\n  theme:'twilight',\n  mode: 'xml',\n  firstLineNumber: 5,\n  onLoad: aceLoaded,\n  onChange: aceChanged\n}\"\u003e\u003c/div\u003e\n```\n\nYou'll want to define the `onLoad` and the `onChange` callback on your scope:\n\n```javascript\nmyAppModule.controller('MyController', [ '$scope', function($scope) {\n\n  $scope.aceLoaded = function(_editor) {\n    // Options\n    _editor.setReadOnly(true);\n  };\n\n  $scope.aceChanged = function(e) {\n    //\n  };\n\n}]);\n```\n\nTo handle other options you'll have to use a direct access to the Ace created instance (see [below](#ace-instance-direct-access)).\n\n## Advanced Options\n\nYou can specify advanced options and even `require` options in the directive, as well. For this example, you\nwill have to include the `ext-language_tools.js` file from the ace source code.\n\nThis will copy the UI.Ace files into a `bower_components` folder, along with its dependencies. Load the script files in your application:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"bower_components/ace-builds/src-min-noconflict/ext-language_tools.js\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003cdiv ui-ace=\"{\n  require: ['ace/ext/language_tools'],\n  advanced: {\n      enableSnippets: true,\n      enableBasicAutocompletion: true,\n      enableLiveAutocompletion: true\n  }\n}\"\u003e\u003c/div\u003e\n```\n\nTo include options applicable to the ACE renderer, you can use the `rendererOptions` key:\n\n```html\n\u003cdiv ui-ace=\"{\n  rendererOptions: {\n      maxLinks: Infinity\n  }\n}\"\u003e\u003c/div\u003e\n```\n\n## Support for concatenated bundles\n\nTrying to use ace with concatenated javascript files usually fails because it changes the physical location of the `workerPath`. If you\nneed to work with bundled or minified versions of ace, you can specify the original location of the `workerPath` on disk (_not the bundled file_).\n\nThis should be the folder on disk where `ace.js` resides.\n\n```html\n\u003cdiv ui-ace=\"{\n  workerPath: '/path/to/ace/folder'\n}\"\u003e\u003c/div\u003e\n```\n\n### Working with ng-model\n\nThe ui-ace directive plays nicely with ng-model.\n\nThe ng-model will be watched for to set the Ace EditSession value (by [setValue](http://ajaxorg.github.io/ace/#nav=api\u0026api=edit_session)).\n\n_The ui-ace directive stores and expects the model value to be a standard javascript String._\n\n### Can be read only\n\nSimple demo\n```html\n\u003cdiv ui-ace readonly\u003e\u003c/div\u003e\nor\nCheck me to make Ace readonly: \u003cinput type=\"checkbox\" ng-model=\"checked\" \u003e\u003cbr/\u003e\n\u003cdiv ui-ace ng-readonly=\"checked\"\u003e\u003c/div\u003e\n```\n\n### Ace instance direct access\n\nFor more interaction with the Ace instance in the directive, we provide a direct access to it.\nUsing\n\n```html\n\u003cdiv ui-ace=\"{ onLoad : aceLoaded }\" \u003e\u003c/div\u003e\n```\n\nthe `$scope.aceLoaded` function will be called with the [Ace Editor instance](http://ajaxorg.github.io/ace/#nav=api\u0026api=editor) as first argument\n\n```javascript\nmyAppModule.controller('MyController', [ '$scope', function($scope) {\n\n  $scope.aceLoaded = function(_editor){\n    // Editor part\n    var _session = _editor.getSession();\n    var _renderer = _editor.renderer;\n\n    // Options\n    _editor.setReadOnly(true);\n    _session.setUndoManager(new ace.UndoManager());\n    _renderer.setShowGutter(false);\n\n    // Events\n    _editor.on(\"changeSession\", function(){ ... });\n    _session.on(\"change\", function(){ ... });\n  };\n\n}]);\n```\n\n## Testing\n\nWe use Karma and jshint to ensure the quality of the code.  The easiest way to run these checks is to use grunt:\n\n```sh\nnpm install -g grunt-cli\nnpm install \u0026\u0026 bower install\ngrunt\n```\n\nThe karma task will try to open Firefox and Chrome as browser in which to run the tests.  Make sure this is available or change the configuration in `test\\karma.conf.js`\n\n\n### Grunt Serve\n\nWe have one task to serve them all !\n\n```sh\ngrunt serve\n```\n\nIt's equal to run separately:\n\n* `grunt connect:server` : giving you a development server at [http://127.0.0.1:8000/](http://127.0.0.1:8000/).\n\n* `grunt karma:server` : giving you a Karma server to run tests (at [http://localhost:9876/](http://localhost:9876/) by default). You can force a test on this server with `grunt karma:unit:run`.\n\n* `grunt watch` : will automatically test your code and build your demo.  You can demo generation with `grunt build:gh-pages`.\n\n\n### Dist\n\nThis repo is using the [angular-ui/angular-ui-publisher](https://github.com/angular-ui/angular-ui-publisher).\nNew tags will automatically trigger a new publication.\nTo test is locally you can trigger a :\n\n```sh\ngrunt dist build:bower\n```\n\nit will put the final files in the _'dist'_ folder and a sample of the bower tag output in the _'out/built/bower'_ folder.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ui%2Fui-ace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-ui%2Fui-ace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ui%2Fui-ace/lists"}