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