一、首先安装codeMirror的依赖射流研究…和css，顺便引入框架包。

链接rel='样式表href=' code mirror-5。31 .0/lib/代码镜像。' CSS '

脚本src=' jquery。1.11 .量滴js '/脚本

脚本src='代码mirror-5。31 .0/lib/代码镜像。js '/脚本

二、由于数据属于Java脚本语言的一种，所以也得引入JavaScript。

脚本src=' codemirror-5。31 .0/mode/JavaScript/JavaScript。js '/脚本

三、安装一些需要的样式，比如我引入的如下样式，其实可以自己选择引入，也可以不引入。

！-引入js，绑定Vim -

脚本src='代码mirror-5。31 .0/键映射/vim。js '/脚本

！-引入钢性铸铁文件，用以支持主题-

链接rel='样式表href=' code mirror-5。31 .0/主题/eclipse。' CSS '

四、身体代码，编辑器就是textarea，可自定义样式，在头中引入即可。

身体

textarea id='code'/textarea

/body

五、最重要的就在头部引用以下代码，表示数据格式化。

！-格式化-

脚本src=' codemirror-5。31 .0/lib/formatting。js '/脚本

我是将自定义的格式化代码存到了codeMirror的解放运动下新建了一个formatting.js，以下是我新建的射流研究…的源码。

(function() {

CodeMirror.extendMode('css '，{

注释开始于： '/*,

注释： '*/',

new line after oken :函数（类型，内容){

返回/^[;{}]$/.测试（内容);

}

});

codemirror。扩展模式(' JavaScript '，{

注释开始于： '/*,

注释： '*/',

//在为内部使用FIXME分号

new line after oken :函数（类型、内容、文本后、状态){

if (this.jsonMode) {

返回/^[\[,{]$/.测试（内容)|| /^}/.测试（文本后);

} else {

if(content=='；'州。词法州。词法。type==')')返回错误的

返回/^[;{}]$/.测试（内容)!/^;/.测试（文本后);

}

}

});

CodeMirror.extendMode('xml '，{

评论开始： '!- ',

注释： ' -',

new line after oken :函数（类型、内容、文本后){

返回类型=='tag' /$/.测试（内容)|| /^/.测试（文本后);

}

});

//注释/取消注释指定的范围

codemirror。定义扩展名('注释'，函数(isComment，from，to) {

var cm=this，cur mode=codemirror。内部模式(cm。getmode()，cm。gettokennat(from).状态)。模式；

cm.operation(function() {

if (isComment) { //注释范围

cm。替换范围(cur模式。注释结束，到)；

cm。替换范围(cur模式。commentstart，from)；

if(from。line==to。线从。ch==to。ch)//插入空注释-将光标放在内部

cm.setCursor(from.line，from。ch cur模式。评论开始。长度)；

} else { //取消注释范围

var selText=cm.getRange(from，to)；

var startIndex=seltext。indexof(cur模式。comment start)；

var endIndex=seltext。的最后一个索引(当前模式。注释结束)；

if(startIndex-1 endIndex-1 endIndex startIndex){

//字符串，直到注释开始

selText=selText.substr(0，startIndex)

//从注释开始到注释结束

seltext。子字符串(开始索引曲线模式。评论开始。长度，endIndex)

//从注释结尾到字符串结尾

seltext。substr(endIndex cur模式。评论结束。长度)；

}

cm.replaceRange(selText，from，to)；

}

});

});

//对指定范围应用自动模式感知缩进

codemirror。定义扩展名('自动范围'，函数（从，到){

var cmInstance=this

this.operation(function () {

for(var I=from。线条；i=to.linei ) {

cmInstance.indentLine(i，' smart ')；

}

});

});

//对指定范围应用自动格式

' CodeMirror.defineExtension('自动套用格式范围，函数（从，到){

var cm=this

var outer=cm.getMode()，text=cm.getRange(从，到)。拆分(' \ n ')；

var state=codemirror。复制状态(外部，cm.getTokenAt(来自).);

var TabSize=cm。GetOption(' TabSize ')；

var out=' '，lines=0，atSol=from。ch==0；

函数newline() {

out=' \ n

atSol=真

线条；

}

for(var I=0；i text.lengthi) {

var stream=新代码镜像.StringStream(text[i]，TabSize)；

while(！stream.eol()) {

var inner=codemirror。内部模式(外部状态)；

var style=outer.token(stream，state)，cur=stream。current()；

小溪。start=流。pos

if(！atSol || /\S/.test(cur)) {

out=cur

atSol=false

}

if(！在索尔内。模式。新线路

内心。模式。NewLineAFTEROken(style，cur，stream。字符串。切片(流。pos)| | text[I 1]| ' '，inner.state))

new line()；

}

if(！小溪。pos外部。空行)外部。空行(状态)；

if(！atSol)新行()；

}

cm.operation(function () {

cm.replaceRange(out，from，to)；

for (var cur=from.line 1，end=from.line linescur=endcur)

cm.indentLine(cur，' smart ')；

cm.setSelection(从，cm。GetCursor(false))；

});

});

})();

六、使用方法

使用方式是在超文本标记语言页面中的Java脚本语言中写入以下代码：

脚本类型='text/javascript '

var editor=codemirror。fromtextarea(文档。getelementbyid(' code ')，{

//Js高亮显示

模式： '应用/json '，

//设置主题

主题： '日蚀，

//快捷键

extraKeys: {

F7':函数自动套用格式（编辑器){

var TotalLines=编辑器。line count()；

编辑。自动套用格式范围({ line :0，ch:0}，{ line : TotalLines })；

}//代码格式化

},

});

/script

运行项目，写入数据格式代码，点击F7就可实现对代码的格式化，由武汉弘医堂技术提供。