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"
  }]
});

編輯器實例:

1123