UI.CodeMirror

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

Code on Github Download (0.3.0)

AخA
 
Code mirror here
  1. <section>
  2. <div ui-codemirror >Code mirror here</div>
  3. </section>
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>
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. }]);