CodeMirror教程，CodeMirrorAPI中文信息

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

转载于:https://www.cnblogs.com/oldphper/p/4065425.html