首页 > 代码库 > codemirror angularjs 多文件自适应高亮编辑
codemirror angularjs 多文件自适应高亮编辑
一个项目的扫尾工作,在原来的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="http://www.mamicode.com/{{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, onl oad : 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 多文件自适应高亮编辑
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。