CodeMirror使用

Posted 2020-10-02 lingwang3

1.什么是Code Mirror

Code Mirror是由js写的一款插件，其功能非常强大,用来实现网页端代码编辑器非常方便。

2.使用Code Mirror

首先要到Code Mirror官网下载此插件，然后在网页中引入即可。http://codemirror.net/

首先，要引用是 lib 目录下的 codemirror.js，还有一个就是同目录下的codemirror.css 文件

<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css"/>

接下来要引用的就是在mode目录下编辑器中要编辑的语言对应的js文件，下面以python文件为例：

<script src="mode/python/python.js"></script>

引用的文件用于支持对应语言的语法高亮。

在实际项目中，一般都不会直接把body作为编辑器的容器。而最常用的，是使用textarea。

要把 textarea 实现成一个支持高亮的编辑器，CodeMirror 提供了非常简单的方法：

<textarea id="editor" name="editor"></textarea>
var myTextarea = document.getElementById(\'editor\');
var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
              mode: "text/x-python", 
              lineNumbers: true
});

配置说明

在使用CodeMirror的时候，不管是直接使用 CodeMirror() 还是使用 fromTextArea() ，都可以通过传递第二个参数来配置编辑器。

var myCodeMirror = CodeMirror.fromTextArea(el, {
    // options...
});

options 可以使用的主要参数

value: string | CodeMirror.Doc
编辑器的初始值（文本），可以是字符串或者CodeMirror文档对象(不同于html文档对象)。

mode: string | object
通用的或者在CodeMirror中使用的与mode相关联的mime，当不设置这个值的时候，会默认使用第一个载入的mode定义文件。一般地，会使用关联的mime类型来设置这个值；除此之外，也可以使用一个带有name属性的对象来作为值（如：{name: “javascript”, json: true}）。可以通过访问CodeMirror.modes和CodeMirror.mimeModes获取定义的mode和MIME。

indentUnit: integer
缩进单位，值为空格数，默认为2 。

extraKeys: object
给编辑器绑定与前面keyMap配置不同的快捷键。

lineNumbers: boolean
是否在编辑器左侧显示行号。

autofocus: boolean
是否在初始化时自动获取焦点。默认情况是关闭的。但是，在使用textarea并且没有明确指定值的时候会被自动设置为true。

要把 textarea 实现成一个支持联想提示的引用下面的文件即可：

<link rel="stylesheet" href="addon/hint/show-hint.css">
<script src="addon/hint/show-hint.js"></script>
<script src="addon/hint/anyword-hint.js"></script>

在开发过程中

注意一：要是代码编辑器是模态框的话，提示及时引用上述文件也提示不出来，原因是层级，提示层没有弹出框和模态框大，需要将show-hint.css的z-index设置的很大即可

注意二：就是多个codeMirror时会相互影响，代码打开会有蒙层覆盖，看不了代码，此时需要每加载一次codeirror需要定时刷新一次，即可解决相互影响问题。