一個項目的掃尾工作，在原來的angular項目上加一個代碼編輯器，codemirror，插件支持大部分的代碼編輯，高亮。下面來說一下codemirror插件的使用過程：

1.用npm安裝angularjs的codemirror插件到項目中，目前使用的版本為0.3.0

2.安裝完以後引入必要的依賴：

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

需要高亮那種語言，引入不同的依賴，

<script src="../codemirror/mode/xml/xml.js"></script>
<script src="../codemirror/mode/markdown/markdown.js"></script>
<script src="../codemirror/mode/yaml/yaml.js"></script>
<script src="../codemirror/mode/javascript/javascript.js"></script
 
>
......

3.在html文件中編寫：

//多文件切換

<select style="margin-top: -19px" class="pull-right" ng-model="mode" ng-change="modeChanged()">
  <option value="" selected="selected">-請選擇修改-</option>
  <option ng-repeat="m in modes" value="{{m.id}}">{{m.filename}}</option>
</select>

<div ui-codemirror="cmOption" ng-model="cmModel">

或者把div改成textarea標簽，或者直接使用:<ui-codemirror>標簽。

4.js初始化多文件切換

var j;
  $scope.cmOption = {
    lineWrapping : true,
    lineNumbers: true,
    indentWithTabs: true,
    onLoad : function(_cm){

      // HACK to have the codemirror instance in the scope...
      $scope.modeChanged = function(){
        var filename=‘‘;
        for(var d = 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‘);
        }
        var i=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(var i = 0;i < $scope.config.filecontent.length;i++){
      if(j===$scope.config.filecontent[i].id){
        $scope.config.filecontent[i].filecontent = newValue;
      }
    }

  });

當前可以監控不同的文件，實時修改多個文件，一次提交。

codemirror angularjs 多文件自適應高亮編輯