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

转载于:https://www.cnblogs.com/sysg/p/6589128.html