在线编码器 codeMirror

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);
}
}
});