CodeMirror中文用户手册

文档大纲

本文档并未完全翻译完成,我需要你的帮助。前往GitHub编辑

用户手册 version 5.52.2

官方网站源代码

CodeMirror 是一个运行在网页中的代码编辑器组件。 核心库只提供编辑器组件,没有按钮、自动完成或其他 IDE 功能,但可以使用 API 来实现这些功能, 参照 插件第三方插件

使用 CodeMirror 必须引入一个语言 Mode。Mode 是为编程语言高亮(缩进)代码的 JavaScript 程序。 参考发行版中的 mode/,或如何编写一个新的 mode

基本用法

只需引入 lib/ 目录下的 js 和 css 文件,和 mode/ 目录下的任意一个 Mode。例如:

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

(也可以用模块化方式)

然后,创建编辑器实例:

var myCodeMirror = CodeMirror(document.body);

这样就在 body 里创建了一个编辑器。 CodeMirror 构造函数的另一个参数是配置对象:

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

创建一个带有初始内容的,使用 JavaScript Mode 的编辑器(可同时引入多个 Mode)。 参考配置章节。

如果你不想把编辑器创建在某个元素里,可以用 CodeMirror 构造函数的第一个参数来实现,该参数可以是 DOM 元素,也可以是一个函数。 例如把 Textarea 替换成编辑器:

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

也可以用下面的方式来实现:

var myCodeMirror = CodeMirror.fromTextArea(myTextArea);

该函数可以使 Textarea 的值与编辑器的内容保持一致。参考 API 章节。

模块化

CodeMirror 也可以在 AMD 或 CommonJS 环境下使用。 如果环境定义了 exportsmodule ,使用 CommonJS-style (require)。 如果环境定义了 defineamd ,使用 AMD-style(RequireJS)。

可以用 Browserify 或其他类似的工具打包 CodeMirror 模块。 或者用 RequireJS 在使用时加载模块。 两种方法都没有使用全局命名空间,因此同时引入多个 CodeMirror 版本时不会互相影响。

使用 RequireJS :

require([
  "cm/lib/codemirror", "cm/mode/htmlmixed/htmlmixed"
  ], function(CodeMirror) {
    CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      mode: "htmlmixed"
    });
});

自动加载 htmlmixed Mode 的依赖模块(XML、JavaScript、CSS)。 应该用 RequireJS 的 packages 属性设置 CodeMirror 的路径, 而不是使用 paths 属性。例如:

require.config({
  packages: [{
    name: "codemirror",
    location: "../path/to/codemirror",
    main: "lib/codemirror"
  }]
});

编辑器实例: