CodeMirror是一款在线的支持语法高亮的代码编辑器。官网： http://codemirror.net/
下载后，解压开得到的文件夹中，lib下是放的是核心库和核心css，mode下放的是各种支持语言的语法定义，theme目录下是支持的主题样式。一般在开发中，添加lib下的引用和mode点击打开链接下的引用就够了。
var editor = $(element).find('.textarea')[0]; //解决异步加载bug $timeout(function () { scope.codeMirror = CodeMirror.fromTextArea(editor, { theme: 'erlang-dark', mode: 'shell', lineNumbers: true, readOnly: false, extraKeys: { "F11": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); $(element).find('.code-type').data('codeMirror',scope.codeMirror); }); //全屏展示 $(element).find('.icon-size-fullscreen').on('click',function(){ var escTip = $('<div style="z-index:10000;font-size:16px;color:#f05050;position: fixed;top: 10px;left:50%;text-align: center;opacity: 1;font-weigth:bold;background-color: #e7fff8;padding:5px;width:400px;margin-left:-200px;">您现在处于全屏模式，按ESC键可以退出全屏！</div>'); $(document.body).append(escTip); escTip.animate({ opacity : '0' },5000,function(){ escTip.remove(); }); scope.codeMirror.setOption("fullScreen", true); }); //选择本地脚本 $('.file').on('change', function () { var data = $(this)[0].files[0]; $('#getNameFile').val(data.name) //对文件大小和类型进行过滤 var arr = data.name.split('.'); if (['txt', 'sh', 'py', 'bat', 'pl','json','yaml'].indexOf(arr[arr.length - 1]) == -1) { scope.$apply(function () { $rootScope.pop('请上传脚本类型的文件，【.txt，.sh，.py，.bat，.pl,.json,.yaml】', 'error'); }); return; } if (data.size > 1024 * 1024) { scope.$apply(function () { $rootScope.pop('文件大小超过1M', 'error'); }); return; } if (data) { //将文件进行转码，转换为text var reader = new FileReader(); reader.readAsText(data); reader.onload = function (f) { scope.codeMirror.setValue(this.result); } } });
