codemirror 光标定位_CodeMirror

下载后，解压开到的文件夹中，lib下是放的是核心库和核心css，模式下放的是各种支持语言的语法定义，主题目录下是支持的主题样式。一般在开发中，添加lib下的引用和模式下的引用就够了。

使用示例

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

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

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

然后，调用脚本以创建编辑器：

var myCodeMirror = CodeMirror(document.body);

这里的调用会在body中添加编辑器，这里因为直接在上面引用了javascript.js，所以这个编辑器会对javascript的关键字高亮显示。

想要高级一点，给编辑器添加一些元素，也可以通过传入配置参数来实现。

var myCodeMirror = CodeMirror(document.body,{

lineNumbers:true

});

这样，就给编辑器添加了行号。

上面说的是实现编辑器的最简单的方式，然后在实际项目中，一般都不会直接把body作为编辑器的容器。而最常用的，是使用textarea。

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

var myTextarea = document.getElementById('editor');

var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {

mode:"text/javascript",

lineNumbers:true

});

python例子:

Document

click

index.js文件

window.onload =function() {

var el = document.getElementById("editor");

var version ="# version: Python3\n\n";

var codeAreaTip ="# please edit your code here:\n";`

var codeStart ="# code start\n\n";

var codeEnd = "# code end\n\n";

var codeTip =" '''\nThis function is the entry of this program and\nit must be return your answer of current question.\n'''\n"