codemirror的筆記

--------------------文檔資料---------------------------------

doc.posFromIndex(index: integer) → {line, ch}
計算並返回一個{line, ch}對象，該對象的基於零的index人的值相對於編輯器文本的開頭。如果index超出文本範圍，則返回的對象將分別剪切爲文本的開頭或結尾。
doc.indexFromPos(object: {line, ch}) → integer
相反的posFromIndex。

doc.getAllMarks() → array<TextMarker>

返回包含文檔中所有標記範圍的數組。

cm.refresh() 重載

doc.markClean()

將編輯器內容設置爲“clean”，這是一個在編輯之前將保留的標誌，並且當再次撤消此類編輯時將再次設置該標誌。用於跟蹤是否需要保存內容。這個功能不贊成使用changeGeneration，它允許多個子系統跟蹤不同的清潔概念而不會干擾。

 

cm.on(type: string, func: (...args))

在編輯器實例上爲給定的事件類型（字符串）註冊事件處理程序。還有一個CodeMirror.on(object, type, func)版本允許在任何對象上註冊事件。

"change" (instance: CodeMirror, changeObj: object)

每次更改編輯器的內容時​​觸發。的changeObj是一個{from, to, text, removed, origin}有關所發生作爲第二個參數的變化包含對象的信息。from 並且to是變化開始和結束的位置（在變更前座標系中）（例如，可能是{ch:0, line:18}位置在第19行的開頭）。text是一個字符串數組，表示替換更改範圍的文本（按行拆分）。removed曾經是from和之間的文本，to被這個更改覆蓋。在DOM更新發生之前，在操作結束之前觸發此事件。

"changes" (instance: CodeMirror, changes: array<object>)

與"change" 事件類似，但是按操作批處理，傳遞包含操作中發生的所有更改的數組。操作完成後會觸發此事件，並且顯示的更改將觸發新操作。

"beforeChange" (instance: CodeMirror, changeObj: object)

在應用更改之前觸發此事件，並且其處理程序可以選擇修改或取消更改。的changeObj對象有from，to和text 屬性，與"change"事件。它還有一個cancel()方法，可以調用它來取消更改，如果更改不是來自撤消或重做事件，update(from, to, text)則可以使用一種方法來修改更改。無法修改撤消或重做更改，因爲它們包含一些元信息，用於恢復僅對該特定更改有效的舊標記範圍。所有三個參數update都是可選的，並且可以保留以保持該字段的現有值不變。注意：您可能無法從"beforeChange"可能導致文檔或其可視化更改的處理程序中執行任何操作。這樣做，因爲直接從CodeMirror實現的內容調用此處理程序，可能會導致編輯器損壞。

---------------------搜索資料---------------------------------------

 

codemirror 如何高亮一整行

使用 this.editor.markText({line:0, ch: 0}, {line: 1, ch: 9}, {className: "errorHighlight"}); 

觸發事件

1.onChange(instance,changeObj)：codeMirror文本被修改後觸發。

instance是一個當前的codemirror對象，changeObj是一個｛from，to，text[,removed][，origin]｝對象。其中from，to分別表示起始行對象和結束行對象，行對象包括ch：改變位置距離行頭的間隔字符，line：改變的行數。text是一個字符串數組表示被修改的文本內容，即你輸入的內容。

2.onBeforeChange(instance,changObj):內容改變前被調用

3.onCursorActivity(instance)：當鼠標點擊內容區、選中內容、修改內容時被觸發

4.onKeyHandled:(instance,name,event):當一個都dom元素的事件觸發時調用，name爲操作名稱。

5.onInputRead(insatance,changeObj):當一個新的input從隱藏的textara讀取出時調用

6.onBeforeSelectionChange(instance,obj):當選中的區域被改變時調用，obj對象是選擇的範圍和改變的內容（本人未測試成功）

7.onUpdate(instance):編輯器內容被改變時觸發

8.onFocus(instance):編輯器獲得焦點式觸發

9.onBlur(instance):編輯器失去焦點時觸發

常用方法

editor.refresh();刷新編輯器

editor.setOption('lineWrapping', true);設置自動換行

editor.setSize('auto', 'auto');設置自適應高度

getValue():獲取編輯器文本內容

setValue(text):設置編輯器文本內容

getRange({line,ch},{line,ch}):獲取指定範圍內的文本內容第一個對象是起始座標，第二個是結束座標

replaceRange(replaceStr,{line,ch},{line,ch}):替換指定區域的內容

getLine(line)：獲取指定行的文本內容

lineCount():統計編輯器內容行數

firstLine():獲取第一行行數，默認爲0，從開始計數

lastLine():獲取最後一行行數

getLineHandle(line):根據行號獲取行句柄

getSelection():獲取鼠標選中區域的代碼

replaceSelection(str):替換選中區域的代碼

setSelection({line:num,ch:num1},{line:num2,ch:num3}):設置一個區域被選中

somethingSelected()：判斷是否被選擇

getEditor()：獲取CodeMirror對像

undo()：撤銷

redo():回退

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

          //alert(editor.getValue()); // 得到所有內容
            //editor.setValue("abc"); // 將編輯器內容改爲"abc"
              
             // 0爲起點，2行第3個字母到2行第5個字母
             //alert(editor.getRange({line:1,ch:2},{line:1,ch:5}));  //得到
             //editor.replaceRange("shashasha",{line:1,ch:2},{line:2,ch:5});
               
             //alert(editor.getLine(2));   // 第三行數據
             //alert(editor.lineCount());   // 總共幾行
             //alert(editor.firstLine());   // 首行數0
             //alert(editor.lastLine());   // 末行數19，共20行
             //ob = editor.getLineHandle(1);   // 第二行數據句柄
             //alert(editor.getLineNumber(ob)); // 行句柄在哪行
             //editor.eachLine(0,2,alert(ob));
              
             //ob = editor.changeGeneration();    // 編輯動作次數，1次起
             //editor.markClean();   // 清除動作
             //editor.isClearn();    // 是否清除
              
             //ob = editor.getSelection();   // 獲得選中的數據一條
             //ob = editor.getSelections();  // 獲得選中數據多條
             editor.replaceSelection("ttttttt"); // 選中替換，一條根多條都替換，不選中則在光標處插入
             //editor.replaceSelections(["aaa","bbb"]); // 選中替換，多條對多選
             //editor.setSelection();  //設置選中
             //editor.setSelections();  //設置選中
             //ob = editor.listSelections(); //boj
             //ob = editor.somethingSelected(); // 是否有選中
             //editor.addSelection({line:2,ch:6}, {line:1,ch:2});  // 選中此段
              
             //ob = editor.getCursor();    // ob['line']、['ch']
             //editor.setCursor(2);    // 設置光標位置
              
             //ob = editor.hasFocus();   // focus?全false
              
             //editor.addOverlay("aaaaa"); //..
             //editor.removeOverlay("aaaaa"); //..
              
             //ob = editor.getDoc();   // 文檔對象,很多
             //ob = editor.getEditor();   //..
              
             //ob = editor.setBookmark({line:1,ch:3}); // 書籤對象
              
             //editor.addWidget({line:1,ch:2},"<if></if>",true); //添加部件
              
             //editor.setSize(1100,1100);    //設置寬高
             //editor.scrollTo(800,300); // 設置滾動條位置
              
             //editor.cursorCoords({line:1,ch:2},"aaaaaa"); //..
              
             //for (var i in ob)
             //    alert(i);
             //alert(ob);