codemirror angularjs 多文件自适应高亮编辑

Posted 2020-09-20 一只特立独行的马

一个项目的扫尾工作，在原来的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;
      }
    }

  });

 

当前可以监控不同的文件，实时修改多个文件，一次提交。