This directive allows you to add CodeMirror to your textarea elements.
Requirements
- AngularJS
- CodeMirror 3.15.x
Usage
You can get it from Bower
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:
<link rel="stylesheet" type="text/css" href="bower_components/codemirror/lib/codemirror.css">
<script type="text/javascript" src="bower_components/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
Add the UI.Codemirror module as a dependency to your application module:
var myAppModule = angular.module('MyApp', ['ui.codemirror']);
Finally, add the directive to your html:
<textarea ui-codemirror ng-model="x"></textarea>
Options
All the Codemirror configuration options can be passed through the directive.
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.
<textarea ui-codemirror="editorOptions" ng-model="x"></textarea>
Working with ng-model
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.
ui-codemirror events
The CodeMirror events are supported has configuration options. They keep the same name but are prefixed by on.. This directive expects the events to be javascript Functions. For example to handle changes of in the editor, we use onChange
<textarea ui-codemirror="{
lineWrapping : true,
lineNumbers: true,
mode: 'javascript',
onChange: reParseInput
}" ng-model="x"></textarea>
Now you can set the reParseInput function in the controller.
$scope.reParseInput = function(){
$scope.errorMsg = "";
$timeout.cancel(pending);
pending = $timeout($scope.workHere, 500);
};
ui-refresh directive
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....
<textarea ui-codemirror ng-model="x" ui-refresh='isSomething'></textarea>
Now you can set the isSomething in the controller scope.
$scope.isSomething = true;
Note: the comparison operator between the old and the new value is "!=="
CodeMirror instance direct access
For more interaction with the CodeMirror instance in the directive, we provide a direct access to it. Using
<div ui-codemirror="{ onLoad : codemirrorLoaded }" ></div>
the $scope.codemirrorLoaded
function will be called with the CodeMirror editor instance as first argument
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:
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 test\karma.conf.js
Watch
You can watch files change for your tests with
grunt watch
Make sure to have a Karma server available with it.
grunt server
(you can force a test on this server with grunt karma:unit:run
)
Local Doc
The documentation is generated by bower and grunt. To build it run :
grunt build-doc
And then, launch a built-in web server on the angular-ui-docs bower module
cd bower_components/angular-ui-docs/
php -S localhost:8000
or
python -m SimpleHTTPServer
Then check your http://localhost:8000/
Tips for fast development : Inline everything
grunt build-doc && cd bower_components/angular-ui-docs/ && php -S localhost:8000 && cd ../..