CodeMirror 基本用法

使用CodeMirror最简单的方法就是加载 下的js和css,再加上mode/目录下的mode js文件就好了。例如:

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

然后,就可以创建CodeMirror实例了:

var myCodeMirror = CodeMirror(document.body)

编辑器会被附加到body内,并且将使用前面加载的mode。要对新的编辑器进行更多控制,可以配置对象作为二个参数传给CodeMirror

var myCodeMirror = CodeMirror(document.body, {
  value: "function myScript(){return 100;}\n",
  mode:  "javascript"
});

此操作会初始化编辑器并往里面放一个代码片段(value部分),并且明确指定使用javascriptmode(这种做法在页面上加载了多种mode的时候很有用)。

有的时候,不想将编辑器添加到某元素内,而是希望能更好地控制其添加方式,那么给CodeMirror的第一个参数也可以是一个用于将编辑器放到某个指定元素内的函数。例如,使用一个真正的编辑器替换textarea

var myCodeMirror = CodeMirror(function(elt) {
  myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});

这是通常使用CodeMirror的方法,然后CodeMirror还提供了一个更强大的简便方法:

var myCodeMirror = CodeMirror.fromTextArea(myTextArea);

这样做可以确保在form提交时(前提:属于form)textarea的值可以随着编辑器的值更新。