CodeMirror -岩石教程

特色

多语言支持: 支持超过100种编程语言。
语法高亮: 提供准确的语法高亮，增强代码可读性。
可扩展性: 通过插件系统可以添加额外的功能，如代码折叠、行号显示等。
主题: 多种主题可供选择，支持自定义主题。
键盘快捷键: 支持常用的编辑快捷键，类似于 Emacs、Vim 等。
跨浏览器兼容: 在所有现代浏览器上运行良好。
丰富的API: 提供全面的 API 用于控制编辑器行为和获取编辑内容。

安装方式

通过 npm 安装:
```
npm install codemirror
```

通过 CDN 引入:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>

基本使用

引入 CodeMirror CSS 和 JS 文件:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>

创建一个 HTML 元素用于编辑器:
```
<textarea id="editor"></textarea>
```

初始化 CodeMirror 编辑器:

const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  lineNumbers: true,        // 显示行号
  mode: 'javascript',       // 语言模式
  theme: 'default'          // 主题
});

高级用法

插件和扩展: CodeMirror 通过插件扩展编辑器功能。例如，添加代码折叠功能：

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/addon/fold/foldcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/addon/fold/foldgutter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/addon/fold/brace-fold.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/addon/fold/foldgutter.min.css">

const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  lineNumbers: true,
  mode: 'javascript',
  theme: 'default',
  foldGutter: true,          // 启用折叠功能
  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
});

自定义快捷键: 可以为编辑器添加自定义快捷键：

const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  lineNumbers: true,
  mode: 'javascript',
  theme: 'default',
  extraKeys: {
    'Ctrl-Space': 'autocomplete', // 启用自动补全
    'Ctrl-Q': function(cm) { cm.foldCode(cm.getCursor()); } // 折叠代码
  }
});

主题: CodeMirror 提供多种主题，可以通过引入主题 CSS 文件并配置编辑器选项来更改主题：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/dracula.min.css">

const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  lineNumbers: true,
  mode: 'javascript',
  theme: 'dracula'           // 使用 Dracula 主题
});

API 介绍

fromTextArea options参数属性说明

属性	类型	默认值	描述
`mode`	`String`	`null`	语言模式，指定代码的语法高亮，如 `javascript`、`css`、`htmlmixed` 等。
`theme`	`String`	`'default'`	编辑器主题，可以是内置主题或自定义主题。
`lineNumbers`	`Boolean`	`false`	是否在编辑器左侧显示行号。
`readOnly`	`Boolean`	`false`	是否设置为只读模式。
`gutters`	`Array`	`[]`	显示在行号左侧的额外信息区域，可以用于代码折叠等功能。
`foldGutter`	`Boolean`	`false`	是否启用代码折叠功能。
`lineWrapping`	`Boolean`	`false`	是否启用自动换行功能。
`matchBrackets`	`Boolean`	`false`	是否启用括号匹配功能。
`autoCloseBrackets`	`Boolean`	`false`	是否启用自动闭合括号功能。
`extraKeys`	`Object`	`{}`	自定义快捷键映射，格式为 `{'快捷键': '功能'}`。
`tabSize`	`Number`	`4`	设置 Tab 键的宽度，以空格数表示。
`indentUnit`	`Number`	`2`	设置自动缩进的单位，以空格数表示。
`indentWithTabs`	`Boolean`	`false`	是否使用 Tab 字符进行缩进。
`cursorBlinkRate`	`Number`	`530`	设置光标闪烁的速度，单位为毫秒。
`cursorHeight`	`Number`	`1`	设置光标的高度，取值范围为 `0` 到 `1`。
`viewportMargin`	`Number`	`10`	设置在屏幕外的多少行进行渲染，值为 `Infinity` 时渲染整个文档。
`autofocus`	`Boolean`	`false`	是否自动聚焦到编辑器。
`smartIndent`	`Boolean`	`true`	是否启用智能缩进。
`hintOptions`	`Object`	`{}`	设置自动补全提示选项。
`value`	`String`	`''`	设置编辑器的初始内容。

方法说明

API	参数	类型	描述	示例
`fromTextArea`	`textarea, options`	`HTMLElement, Object`	创建一个从 textarea 元素生成的 CodeMirror 实例	`const editor = CodeMirror.fromTextArea(document.getElementById('editor'), { lineNumbers: true });`
`getValue`	无	`String`	获取编辑器内容	`const content = editor.getValue();`
`setValue`	`content`	`String`	设置编辑器内容	`editor.setValue('console.log("Hello, world!");');`
`on`	`event, callback`	`String, Function`	为特定事件附加事件监听器	`editor.on('change', (instance, changeObj) => { console.log('Content changed'); });`
`addKeyMap`	`keymap`	`Object`	添加快捷键映射	`editor.addKeyMap({ 'Ctrl-S': saveFunction });`
`focus`	无	无	聚焦编辑器	`editor.focus();`
`setOption`	`option, value`	`String, Any`	设置编辑器选项	`editor.setOption('theme', 'monokai');`
`getOption`	`option`	`String`	获取编辑器选项	`const theme = editor.getOption('theme');`
`refresh`	无	无	重新渲染编辑器	`editor.refresh();`

示例详细说明

fromTextArea(textarea, options)

const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  lineNumbers: true,
  mode: 'javascript',
  theme: 'default'
});

getValue()

const content = editor.getValue();
console.log(content);

setValue(content)

editor.setValue('console.log("Hello, world!");');

on(event, callback)

editor.on('change', (instance, changeObj) => {
  console.log('内容改变');
});

addKeyMap(keymap)

editor.addKeyMap({
  'Ctrl-S': function(cm) { console.log('保存'); }
});

focus()
```
editor.focus();
```
setOption(option, value)
```
editor.setOption('theme', 'monokai');
```

getOption(option)

const theme = editor.getOption('theme');
console.log(theme);

refresh()
```
editor.refresh();
```

CodeMirror

特色