Codemirror ANGULARJS Multi-file adaptive highlight editing

A project to wrap up work, in the original angular project add a code Editor , Codemirror, plug-in support most of the code editing, highlighting. Here's how the Codemirror plugin is used:

1. Use NPM to install the Angularjs Codemirror plugin into the project, currently using the version 0.3.0

2. Introduce the necessary dependencies after installation:

 <  link  rel  = "stylesheet"   href  = ". /codemirror/lib/codemirror.css " />   <  script  src  =". /codemirror/lib/codemirror.js " ></ script  >  <  script  src  = ". /angular-ui-codemirror/ui-codemirror.js " ></ script  >  

Need to highlight that language, introduce different dependencies,

<Scriptsrc=".. /codemirror/mode/xml/xml.js "></Script><Scriptsrc=".. /codemirror/mode/markdown/markdown.js "></Script><Scriptsrc=".. /codemirror/mode/yaml/yaml.js "></Script><Scriptsrc=".. /codemirror/mode/javascript/javascript.js "></Script>
......

3. Write in the HTML file:

Multi-File switching

<select style= "margin-top: -19px" class= "pull-right" ng-model= "mode" ng-change= "modechanged ()" >
  <option value= "" selected= "selected" >-Please select Modify-</option>
  <option ng-repeat= "M in Modes" value= "{{m.id}}" >{{m.filename}}</option>
</select>

<ui-codemirror= "Cmoption"  ng-model= "Cmmodel">

or change the div to a textarea tag, or use the:<ui-codemirror> tag directly.

4.js initializing multi-file switching

varJ; $scope. Cmoption={linewrapping:true, Linenumbers:true, Indentwithtabs:true, OnLoad:function(_cm) {//HACK to has the Codemirror instance in the scope ...$scope. modechanged =function(){        varFilename= ";  for(varD = 0;d < $scope. config.filecontent.length;d++){          if($scope. mode===$scope. Config.filecontent[d].id) {filename=$scope. Config.filecontent[d].filename; }        }        if(Filename.indexof ('. MD ') >0) {_cm.setoption ("Mode", ' Markdown '); }Else if(Filename.indexof ('. Yml ') >0) {_cm.setoption ("Mode", ' Yaml '); }Else if(Filename.indexof ('. JSON ') >0) {_cm.setoption ("Mode", ' JavaScript '); }Else{_cm.setoption ("Mode", ' XML '); }        varI=0;  for(; i < $scope. config.filecontent.length;i++){          if($scope. mode===$scope. Config.filecontent[i].id) {$scope. Cmmodel=$scope. config.filecontent[i].filecontent; J=$scope. Mode; }        }        //watch ();      };  }  }; $scope. $watch (' Cmmodel ',function(Newvalue,oldvalue, scope) {Console.log (j);  for(vari = 0;i < $scope. config.filecontent.length;i++){      if(j===$scope. Config.filecontent[i].id) {$scope. config.filecontent[i].filecontent=NewValue; }    }  });

Currently can monitor different files, modify multiple files in real-time, one commit.

Codemirror ANGULARJS Multi-file adaptive highlight editing