This directive allows you to add CodeMirror to your textarea elements.
npm install angular-ui-codemirrorThis directive allows you to add CodeMirror to your textarea elements.
- AngularJS 1.3.x
- CodeMirror 4.8.x
You can get it from Bower
``sh`
bower install angular-ui-codemirror
This will copy the UI.Codemirror files into a bower_components folder, along with its dependencies. Load the script files in your application:
`html`
Add the UI.Codemirror module as a dependency to your application module:
`javascript`
var myAppModule = angular.module('MyApp', ['ui.codemirror']);
Finally, add the directive to your html,
as attribute :
`html
// Not well supported yet but still... We need feedbacks to improve it...
as element :
xml
`
Options
All the Codemirror configuration options can be passed through the directive.
javascript
myAppModule.controller('MyController', [ '$scope', function($scope) {
$scope.editorOptions = {
lineWrapping : true,
lineNumbers: true,
readOnly: 'nocursor',
mode: 'xml',
};
}]);
`If you update this variable with the new values, they will be merged and the ui will be updated.
xml
`$3
The ui-codemirror directive plays nicely with ng-model.
The ng-model will be watched for to set the CodeMirror document value (by setValue).
_The ui-codemirror directive stores and expects the model value to be a standard javascript String._
$3
If you apply the refresh directive to element then any change to do this scope value will result to a refresh of the CodeMirror instance.
_The ui-refresh directive expects a scope variable that can be any thing...._
html
`Now you can set the _isSomething_ in the controller scope.
javascript
$scope.isSomething = true;
`Note: the comparison operator between the old and the new value is "!=="
$3
For more interaction with the CodeMirror instance in the directive, we provide a direct access to it.
Using
html
`the
function will be called with the CodeMirror editor instance as first argument`javascript
myAppModule.controller('MyController', [ '$scope', function($scope) { $scope.codemirrorLoaded = function(_editor){
// Editor part
var _doc = _editor.getDoc();
_editor.focus();
// Options
_editor.setOption('firstLineNumber', 10);
_doc.markClean()
// Events
_editor.on("beforeChange", function(){ ... });
_editor.on("change", function(){ ... });
};
}]);
`Testing
We use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:
sh
npm install -g grunt-cli
npm install && bower install
grunt
`The 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
$3
We have one task to serve them all !
sh
grunt serve
`It's equal to run separately:
*
: giving you a development server at http://localhost:8000/.*
grunt karma:server : giving you a Karma server to run tests (at http://localhost:9876/ by default). You can force a test on this server with grunt karma:unit:run.*
grunt watch : will automatically test your code and build your demo. You can demo generation with grunt build:gh-pages.
$3
This repo is using the angular-ui/angular-ui-publisher.
New tags will automatically trigger a new publication.
To test is locally you can trigger a :
`sh
grunt dist build:bower
``it will put the final files in the _'dist'_ folder and a sample of the bower tag output in the _'out/built/bower'_ folder.
[travis-url]: https://travis-ci.org/angular-ui/ui-codemirror
[travis-image]: https://travis-ci.org/angular-ui/ui-codemirror.svg?branch=master
[codeclimate-url]: https://codeclimate.com/github/angular-ui/ui-codemirror
[codeclimate-image]: https://codeclimate.com/github/angular-ui/ui-codemirror/badges/gpa.svg