CodeMIrror.js在线代码编辑器简单使用

Myth丶恋晨 2021-06-26 16:06 1158阅读 0赞

代码高亮是程序员的刚需，不管是在笔记类，论坛类，博客类`web`网站中，都对代码高亮提出要求，不高亮的代码阅读体验很差，`codeMirror`是一个前端代码高亮库，使用方便。`CodeMirror` 是一款在线的支持语法高亮的代码编辑器。

`codeMirror`可以直接在官网下载：http://codemirror.net/

下载文件中，我们需要的是 `lib` 下的 `codemirror.js` 和 `codemirror.css` ，这两个是必备的，其他 `theme`(主题)，`mode`(高亮模式)按需定制。  
比如说你要高亮一段`xml`，你就需要用到`mode/xml/xml.js`.

除此之外，`demo`是最好的案例，基本上都可以`copy`过来自己改一改，`doc`是一些文档，不过都是英文的，我也没细看。`keymap`里面可以定制一些代码编辑的快捷键……

使用入门：  
建立一个`html`文件，head中引入下列文件，此处我需要高亮`xml`，所以我引入了这个`xml.js`；

在`html`中给一个`textarea`：

一般使用代码高亮都是用在文档内部，这里虽然给了个`textarea`，但是这里并不是把`code`直接显示在`textarea`中，而是生成了一个`div`，内部定义了行号，代码内容和滚动条等信息。  
![在这里插入图片描述][20190909142307704.png]  
调用方法

editor_req = CodeMirror.fromTextArea(document.getElementById("code"), { 
            mode: "xml",
            lineNumbers: true,
            scrollbarStyle: null
     });

这里`scrollbarStyle` 是滚动条设置，我设置为`null`，是因为在使用中出现了个诡异的双层滚动条的错误！  
后来发现是我`codeMirror`宽度设置的问题，这里的`scrollbarStyle` 还是要按需定制。

.CodeMirror-scroll { 
                overflow: auto;
                height: 360px;
                width: 860px;
     }

![在这里插入图片描述][2019090914343293.png]  
以上，就是初步的使用，如果有复杂需求，建议直接看源码。

--------------------

## `CodeMirror`的使用方法 ##

最近项目中用到了`CodeMirror`这个代码编辑器，感觉非常好用，可以设置很多种代码格式。默认前提是你已经正确引入了所有的`js`文件和`css`文件。

下面是我在项目中用到过和在网上搜集整理的使用方法：

1、首先在`html`界面中建立`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()//回退

可能整理的不全，欢迎补充。

[20190909142307704.png]: /images/20210626/a857e970d1a84ff09675131170005187.png
[2019090914343293.png]: /images/20210626/46a37f022cb747a3afa1814f063f9302.png