<html>
<head>
<link rel="stylesheet" href="codemirror.css"> <!-- 引入CSS文件 -->
<script src="codemirror.js"></script> <!-- 引入JS文件 -->
</head>
<body>
<textarea id="code" name="code">http://www.cnblogs.com/oldphper</textarea>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { // 标识到textarea
value : "http://www.cnblogs.com/oldphper", // 文本域默认显示的文本
mode : "text/html", // 模式
// theme : "", // CSS样式选择
indentUnit : 2, // 缩进单位，默认2
smartIndent : true, // 是否智能缩进
tabSize : 4, // Tab缩进，默认4
readOnly : false, // 是否只读，默认false
showCursorWhenSelecting : true,
lineNumbers : true // 是否显示行号
// .. 还有好多，翻译不完。需要的去看http://codemirror.net/doc/manual.html#config
});
</script>
</body>
</html>
<head>
<link rel="stylesheet" href="codemirror.css"> <!-- 引入CSS文件 -->
<script src="codemirror.js"></script> <!-- 引入JS文件 -->
</head>
<body>
<textarea id="code" name="code">http://www.cnblogs.com/oldphper</textarea>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { // 标识到textarea
value : "http://www.cnblogs.com/oldphper", // 文本域默认显示的文本
mode : "text/html", // 模式
// theme : "", // CSS样式选择
indentUnit : 2, // 缩进单位，默认2
smartIndent : true, // 是否智能缩进
tabSize : 4, // Tab缩进，默认4
readOnly : false, // 是否只读，默认false
showCursorWhenSelecting : true,
lineNumbers : true // 是否显示行号
// .. 还有好多，翻译不完。需要的去看http://codemirror.net/doc/manual.html#config
});
</script>
</body>
</html>
API 部分信息。一个一个测试出来的。
1 function fun() {
2 ob = "";
3 //alert(editor.getValue()); // 得到所有内容
4 //editor.setValue("abc"); // 将编辑器内容改为"abc"
5
6 // 0为起点，2行第3个字母到2行第5个字母
7 //alert(editor.getRange({line:1,ch:2},{line:1,ch:5})); //得到
8 //editor.replaceRange("shashasha",{line:1,ch:2},{line:2,ch:5});
9
10 //alert(editor.getLine(2)); // 第三行数据
11 //alert(editor.lineCount()); // 总共几行
12 //alert(editor.firstLine()); // 首行数0
13 //alert(editor.lastLine()); // 末行数19，共20行
14 //ob = editor.getLineHandle(1); // 第二行数据句柄
15 //alert(editor.getLineNumber(ob)); // 行句柄在哪行
16 //editor.eachLine(0,2,alert(ob));
17
18 //ob = editor.changeGeneration(); // 编辑动作次数，1次起
19 //editor.markClean(); // 清除动作
20 //editor.isClearn(); // 是否清除
21
22 //ob = editor.getSelection(); // 获得选中的数据一条
23 //ob = editor.getSelections(); // 获得选中数据多条
24 editor.replaceSelection("ttttttt"); // 选中替换，一条根多条都替换，不选中则在光标处插入
25 //editor.replaceSelections(["aaa","bbb"]); // 选中替换，多条对多选
26 //editor.setSelection(); //设置选中
27 //editor.setSelections(); //设置选中
28 //ob = editor.listSelections(); //boj
29 //ob = editor.somethingSelected(); // 是否有选中
30 //editor.addSelection({line:2,ch:6}, {line:1,ch:2}); // 选中此段
31
32 //ob = editor.getCursor(); // ob['line']、['ch']
33 //editor.setCursor(2); // 设置光标位置
34
35 //ob = editor.hasFocus(); // focus?全false
36
37 //editor.addOverlay("aaaaa"); //..
38 //editor.removeOverlay("aaaaa"); //..
39
40 //ob = editor.getDoc(); // 文档对象,很多
41 //ob = editor.getEditor(); //..
42
43 //ob = editor.setBookmark({line:1,ch:3}); // 书签对象
44
45 //editor.addWidget({line:1,ch:2},"<if></if>",true); //添加部件
46
47 //editor.setSize(1100,1100); //设置宽高
48 //editor.scrollTo(800,300); // 设置滚动条位置
49
50 //editor.cursorCoords({line:1,ch:2},"aaaaaa"); //..
51
52 //for (var i in ob)
53 // alert(i);
54 //alert(ob);
55 }
2 ob = "";
3 //alert(editor.getValue()); // 得到所有内容
4 //editor.setValue("abc"); // 将编辑器内容改为"abc"
5
6 // 0为起点，2行第3个字母到2行第5个字母
7 //alert(editor.getRange({line:1,ch:2},{line:1,ch:5})); //得到
8 //editor.replaceRange("shashasha",{line:1,ch:2},{line:2,ch:5});
9
10 //alert(editor.getLine(2)); // 第三行数据
11 //alert(editor.lineCount()); // 总共几行
12 //alert(editor.firstLine()); // 首行数0
13 //alert(editor.lastLine()); // 末行数19，共20行
14 //ob = editor.getLineHandle(1); // 第二行数据句柄
15 //alert(editor.getLineNumber(ob)); // 行句柄在哪行
16 //editor.eachLine(0,2,alert(ob));
17
18 //ob = editor.changeGeneration(); // 编辑动作次数，1次起
19 //editor.markClean(); // 清除动作
20 //editor.isClearn(); // 是否清除
21
22 //ob = editor.getSelection(); // 获得选中的数据一条
23 //ob = editor.getSelections(); // 获得选中数据多条
24 editor.replaceSelection("ttttttt"); // 选中替换，一条根多条都替换，不选中则在光标处插入
25 //editor.replaceSelections(["aaa","bbb"]); // 选中替换，多条对多选
26 //editor.setSelection(); //设置选中
27 //editor.setSelections(); //设置选中
28 //ob = editor.listSelections(); //boj
29 //ob = editor.somethingSelected(); // 是否有选中
30 //editor.addSelection({line:2,ch:6}, {line:1,ch:2}); // 选中此段
31
32 //ob = editor.getCursor(); // ob['line']、['ch']
33 //editor.setCursor(2); // 设置光标位置
34
35 //ob = editor.hasFocus(); // focus?全false
36
37 //editor.addOverlay("aaaaa"); //..
38 //editor.removeOverlay("aaaaa"); //..
39
40 //ob = editor.getDoc(); // 文档对象,很多
41 //ob = editor.getEditor(); //..
42
43 //ob = editor.setBookmark({line:1,ch:3}); // 书签对象
44
45 //editor.addWidget({line:1,ch:2},"<if></if>",true); //添加部件
46
47 //editor.setSize(1100,1100); //设置宽高
48 //editor.scrollTo(800,300); // 设置滚动条位置
49
50 //editor.cursorCoords({line:1,ch:2},"aaaaaa"); //..
51
52 //for (var i in ob)
53 // alert(i);
54 //alert(ob);
55 }