CodeMirror的使用方法

最近項目中用到了CodeMirror這個代碼編輯器，感覺非常好用，可以設置很多種代碼格式。默認前提是你已經正確引入了所有的js文件和css文件。

下面是我在項目中用到過和在網上搜集整理的使用方法：

1、首先在html界面中建立textarea標簽，用於生成代碼框

<textarea id="code"></textarea>

2、根據textarea的id獲取到標簽元素，將容器轉換為編輯器

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {//定義CodeMirror代碼編輯器
    lineNumbers: true,     // 顯示行號
        indentUnit: 4,         // 縮進單位為4
        styleActiveLine: true, // 當前行背景高亮
        matchBrackets: true,   // 括號匹配
        mode: 'htmlmixed',     // HMTL混合模式
        lineWrapping: true,    // 自動換行
        theme: 'monokai',      // 編輯器主題
});

 API

editor.setSize(width,height)//設置編輯框的尺寸

editor.getValue()//獲取經過轉義的編輯器文本內容

editor.toTextArea()或editor.getTextArea().value//該方法得到的結果是未經過轉義的數據

editor.setValue(text)//設置編輯器文本內容

editor.getRange({line,ch},{line,ch})//獲取指定范圍內的文本內容第一個對象是起始坐標，第二個是結束坐標

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

editor.getLine(line)//獲取指定行的文本內容

editor.lineCount()//統計編輯器內容行數

editor.firstLine()//獲取第一行行數，默認為0，從開始計數

editor.lastLine()//獲取最后一行行數

editor.getLineHandle(line)//根據行號獲取行句柄

editor.getSelection()//獲取鼠標選中區域的代碼

editor.replaceSelection(str)//替換選中區域的代碼

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

editor.somethingSelected()//判斷是否被選擇

editor.getEditor()//獲取CodeMirror對像

editor.undo()//撤銷

editor.redo()//回退

可能整理的不全，歡迎補充。

 前端交流群，期待你的加入！群號：127768464