UI.CodeMirror

This directive allows you to add CodeMirror to your textarea elements.

Code on Github Download (0.3.0)

Minimal code

AخA
 
Code mirror here
  1. <section>
  2.   <div ui-codemirror >Code mirror here</div>
  3. </section>

General options

xxxxxxxxxx
10
 
1
<html style="color: green">
2
<!-- this is a comment -->
3
<head>
4
<title>HTML Example</title>
5
</head>
6
<body>
7
The indentation tries to be <em>somewhat &quot;do what
8
I mean&quot;</em>... but might not match your style.
9
</body>
10
</html>
  1. <section>
  2.   <div ui-codemirror="{
  3.       lineNumbers: true,
  4.       theme:'twilight',
  5.       readOnly: 'nocursor',
  6.       lineWrapping : true,
  7.       mode: 'xml'
  8.     }" >&lt;html style=&quot;color: green&quot;&gt;
  9. &lt;!-- this is a comment --&gt;
  10. &lt;head&gt;
  11. &lt;title&gt;HTML Example&lt;/title&gt;
  12. &lt;/head&gt;
  13. &lt;body&gt;
  14. The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what
  15. I mean&amp;quot;&lt;/em&gt;... but might not match your style.
  16. &lt;/body&gt;
  17. &lt;/html&gt;</div>
  18. </section>

Mode-Changing demo

​x
18
 
1
;; Scheme code in here.
2
(define (double x)
3
    (* x x))
4
​
5
​
6
<!-- XML code in here. -->
7
<root>
8
    <foo>
9
    </foo>
10
    <bar/>
11
</root>
12
​
13
​
14
// Javascript code in here.
15
function foo(msg) {
16
    var r = Math.random();
17
    return "" + r + " : " + msg;
18
}
Mode : 
  1. <section ng-controller="CodemirrorCtrl">
  2.  
  3.   <textarea ui-codemirror="cmOption" ng-model="cmModel"></textarea>
  4.  
  5.   Mode : <select ng-model="mode" ng-options="m for m in modes" ng-change="modeChanged()"></select>
  6.  
  7. </section>
  1. app.controller('CodemirrorCtrl', ['$scope', function($scope) {
  2.  
  3.   // The modes
  4.   $scope.modes = ['Scheme', 'XML', 'Javascript'];
  5.   $scope.mode = $scope.modes[0];
  6.  
  7.  
  8.   // The ui-codemirror option
  9.   $scope.cmOption = {
  10.     lineNumbers: true,
  11.     indentWithTabs: true,
  12.     onLoad : function(_cm){
  13.  
  14.       // HACK to have the codemirror instance in the scope...
  15.       $scope.modeChanged = function(){
  16.         _cm.setOption("mode", $scope.mode.toLowerCase());
  17.       };
  18.     }
  19.   };
  20.  
  21.  
  22.  
  23.   // Initial code content...
  24.   $scope.cmModel = ';; Scheme code in here.\n' +
  25.     '(define (double x)\n\t(* x x))\n\n\n' +
  26.     '<!-- XML code in here. -->\n' +
  27.     '<root>\n\t<foo>\n\t</foo>\n\t<bar/>\n</root>\n\n\n' +
  28.     '// Javascript code in here.\n' +
  29.     'function foo(msg) {\n\tvar r = Math.random();\n\treturn "" + r + " : " + msg;\n}';
  30.  
  31. }]);