# @fsegurai/ngx-codemirror 中文文档

规范地址：https://npmcn.com/package/%40fsegurai/ngx-codemirror/

版本：22\.0\.0
npm 元数据更新时间：2026-10-14T16:48:05.622Z
中文译文更新时间：2026-11-15T15:39:47.532Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fsegurai/ngx-codemirror
原文对照：https://npmcn.com/package/%40fsegurai/ngx-codemirror/?lang=original
项目主页：https://github.com/fsegurai/ngx-codemirror#readme
源码仓库：https://github.com/fsegurai/ngx-codemirror

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：300 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：codemirror ^6\.0\.2，@angular/core ^22\.0\.0，@angular/forms ^22\.0\.0，@angular/common ^22\.0\.0，@codemirror/lint ^6\.9\.7，@codemirror/view ^6\.43\.13，@codemirror/merge ^6\.12\.2，@codemirror/state ^6\.7\.6，@codemirror/search ^6\.7\.2，@codemirror/commands ^6\.11\.1，@codemirror/language ^6\.12\.4，@codemirror/autocomplete ^6\.20\.3
- 首次发布：2024-12-04T04:47:24.342Z
- 最新版本发布：2026-10-14T16:48:05.393Z
- 近 30 天下载量：5513（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 3 个）

## 中文简介

使用代码解码器创建代码编辑器的角库

## 安装

```sh
npm install @fsegurai/ngx-codemirror
```

也可以使用：`pnpm add @fsegurai/ngx-codemirror`、`yarn add @fsegurai/ngx-codemirror`、`bun add @fsegurai/ngx-codemirror`

## README

![NGX Codemirror Logo](https://raw.githubusercontent.com/fsegurai/ngx-codemirror/main/demo/public/ngx-codemirror.png)

 [![Build Main Status](https://img.shields.io/azure-devops/build/fsegurai/93779823-473d-4fb3-a5b1-27aaa1a88ea2/22/main?label=Build%20Status&)](https://github.com/fsegurai/ngx-codemirror)[![Latest Release](https://img.shields.io/github/v/release/fsegurai/ngx-codemirror)](https://github.com/fsegurai/ngx-codemirror/releases/latest)  
![GitHub contributors](https://img.shields.io/github/contributors/fsegurai/ngx-codemirror) ![Dependency status for repo](https://img.shields.io/librariesio/github/fsegurai/ngx-codemirror) [![GitHub License](https://img.shields.io/github/license/fsegurai/ngx-codemirror)](https://opensource.org/licenses/MIT)  
![Stars](https://img.shields.io/github/stars/fsegurai/ngx-codemirror?style=square&labelColor=343b41) ![Forks](https://img.shields.io/github/forks/fsegurai/ngx-codemirror?style=square&labelColor=343b41) [![NPM Downloads](https://img.shields.io/npm/dt/@fsegurai/ngx-codemirror)](https://www.npmjs.com/package/@fsegurai/ngx-codemirror)

`@fsegurai/ngx-codemirror` 带来 [代码 6](https://codemirror.net/) 改为 [角质](https://angular.dev/) 作为三个 独立、基于信号的组件:

-   `ngx-code-editor` - 一个代码编辑器.
-   `ngx-code-diff-editor` - 边行编辑器([`MergeView`](https://codemirror.net/docs/ref/#merge.MergeView)) (中文(简体) ).
-   `ngx-code-unified-diff-editor` - 一个统一的diff编辑器 (单位:千美元)[`unifiedMergeView`](https://codemirror.net/docs/ref/#merge.unifiedMergeView)) (中文(简体) ).

它们与信号形式、反应形式和 `ngModel`,并且是无区和SSR安全。 主题和扩展可以是: 注册一次 `provideCodeEditor()` 懒惰地装满了子弹.

### 目录

-   [安装](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-installation)
-   [兼容性](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-compatibility)
-   [快开始](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-quick-start)
-   [配置](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-configuration)
-   [主题](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-themes)
-   [扩展](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-extensions)
-   [方便投入](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-convenience-inputs)
-   [错误](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-errors)
-   [程序化 API](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-programmatic-api)
-   [组件 API](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-components-api)
-   [从21.x移走](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-migrating-from-21x)
-   [解析应用程序](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-demo-application)
-   [许可证](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-license)

## 安装

以 CodeMiror 端端依赖性安装库 :

```bash
npm install @fsegurai/ngx-codemirror codemirror @codemirror/autocomplete @codemirror/commands @codemirror/language @codemirror/lint @codemirror/merge @codemirror/search @codemirror/state @codemirror/view
```

`@angular/common`, (中文(简体) ), `@angular/core` 财务报告和审定财务报表 `@angular/forms` (单位:千美元)`^22`)也是同伴的依赖关系. 对于语法强调, 添加您需要的语言描述, 例如所有语言描述 :

```bash
npm install @codemirror/language-data
```

## 兼容性

| 角质 | @fsegurai/ngx-codemirror (英语) |
| --- | --- |
| 22.x 电话 | 22.x 电话 |
| 21.x (中文(简体) ) | 21.x (中文(简体) ) |
| 20.x 电话 | 20.x 电话 |
| 19.x (中文(简体) ) | 19.x (中文(简体) ) |

自21.x起,图书馆为无区(`provideZonelessChangeDetection()`),不需要Zone.j.s. (中文(简体) ).

## 快开始

导入独立组件并将其值与您使用的 API 表格绑定 :

```typescript
import { Component, signal } from '@angular/core';
import { FormField, form } from '@angular/forms/signals';
import { languages } from '@codemirror/language-data';
import { CodeEditorComponent } from '@fsegurai/ngx-codemirror';

@Component({
  selector: 'app-root',
  imports: [CodeEditorComponent, FormField],
  template: `
    <ngx-code-editor
      [formField]="editorForm.code"
      language="javascript"
      [languages]="languages"
      theme="dark"
      [lineWrapping]="true" />
  `,
})
export class AppComponent {
  protected readonly languages = languages;
  protected readonly model = signal({ code: 'const answer = 42;' });
  protected readonly editorForm = form(this.model);
}
```

相同的组件与每个表格 API 工作:

| 装订 | 导入 |
| --- | --- |
| `<ngx-code-editor [formField]="f.code" />` | `FormField` 从 `@angular/forms/signals` |
| `<ngx-code-editor [formControl]="code" />` 编号 : `formControlName` | `ReactiveFormsModule` |
| `<ngx-code-editor [(ngModel)]="code" />` | `FormsModule` |
| `<ngx-code-editor [(value)]="code" />` | 无( 平面) `model()`(中文(简体) ) |

> `language` 按名称或别名在 `languages`: 通过两者或设定 `languages` 一次进入 [`provideCodeEditor()`](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-configuration)无 `languages`,编辑器发出一个 `language-not-found` 错误.

## 配置

`provideCodeEditor(options, ...features)` 设置注射器每个编辑器的默认输入。 用在那个 应用程序提供者,一个路由 `providers` 或组件的 `providers`;一个被窝起的叫声在它的祖先之上融合.

```typescript
import { ApplicationConfig } from '@angular/core';
import { languages } from '@codemirror/language-data';
import { provideCodeEditor, withExtensionPresets, withExtensions, withThemes } from '@fsegurai/ngx-codemirror';

export const appConfig: ApplicationConfig = {
  providers: [
    provideCodeEditor(
      { theme: 'auto', setup: 'basic', lineWrapping: true, languages },
      withThemes(
        { nord: () => import('@fsegurai/codemirror-theme-bundle').then((m) => m.nord) },
        { light: 'light', dark: 'nord' },
      ),
      withExtensions([myExtension]),
      withExtensionPresets({ vim: () => import('@replit/codemirror-vim').then((m) => m.vim()) }),
    ),
  ],
};
```

| 特性 | 它会做什么 |
| --- | --- |
| `withThemes(themes, { light?, dark? })` | 登记被命名为主题,渴望或懒惰. `light` 编号 : `dark` 主题 `'auto'` 用户. |
| `withExtensions(extensions, { mode? })` | 每个编辑器的全局扩展 。 见 [扩展](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-extensions)。 。 。 . |
| `withExtensionPresets(presets)` | 命名扩展名, 启用每个编辑器 `[presets]="['vim']"`。 。 。 . |

优先,最低第一:内置默认,提供方(一个巢于其母),实例输入. 一个 `undefined` 值从不覆盖。 备选办法是投入的备选办法(第2段)`theme`, (中文(简体) ), `setup`, (中文(简体) ), `placeholder`, (中文(简体) ), `indentWithTab`, (中文(简体) ), `indentUnit`, (中文(简体) ), `lineWrapping`, (中文(简体) ), `highlightWhitespace`, (中文(简体) ), `languages`,方便输入和 `presets`页:1 `extensions`。 。 。 .

## 主题

这个 `theme` 输入(和 `theme` 选项)接受:

| 数值 | 主题 |
| --- | --- |
| `'light'` | CodeMiror 的默认外观( 内置默认) |
| `'dark'` | 内置的黑暗基地 |
| `'auto'` | 跟着 `prefers-color-scheme`,使用 `light` 编号 : `dark` 名称 `withThemes()` (因为内置) |
| 注册名称 | 注册的主题 `withThemes()`; 一个懒惰的主题被装入第一次使用并缓存 |
| a 一个 `Extension` | 任意代码 [主题](https://codemirror.net/examples/styling/#themes) |

一次切换每个编辑器( 例如从一个应用轻/ 暗切换), 使用 `CodeEditorThemeService`编辑器 他们自己的 `theme` 输入保留它.

```typescript
inject(CodeEditorThemeService).set('nord'); // undefined goes back to the provider's theme
```

优先,最高第一:实例 `theme` 输入, `CodeEditorThemeService`,则 `theme` 联 合 国 `provideCodeEditor()`, (中文(简体) ), `'light'`。未知名称发出 `invalid-theme` 并保留当前主题.

## 扩展

扩展可能很迫切( :`Extension`)或懒惰(`() => Promise<Extension>`,装入一次并由每个编辑共享).

| 何处 | 怎么样 | 页:1 |
| --- | --- | --- |
| 每个编辑 | `withExtensions([...])` 或者说 `provideCodeEditor({ extensions })` | 巢穴供养者附其父母. |
| 一个编辑 | `[extensions]="[...]"` | 环球扩展后追加. |
| 替换全局 | `withExtensions([...], { mode: 'replace' })` | 一个有自己的编辑 `extensions` 输入只使用这些. |
| 每个编辑器的 Opt- in | `withExtensionPresets({ name: ext })` + 键 `[presets]="['name']"` | 未知名称发出 `unknown-preset`。 。 。 . |

```typescript
withExtensions([
  EditorView.lineWrapping,
  () => import('@replit/codemirror-indentation-markers').then((m) => m.indentationMarkers()),
]);
```

一个失败的懒惰负载释放 `extension-load-failed` 并保留已应用的扩展.

## 方便投入

常见的CodeMiror特性有自己的输入,因此不需要扩展代码. 与 `setup="basic"` 布尔 默认关闭; 默认关闭 。 明确的价值总是赢.

| 投入 | 类型 | 默认 |
| --- | --- | --- |
| `lineNumbers` | `boolean` | 继续 `'basic'` |
| `foldGutter` | `boolean` | 继续 `'basic'` |
| `highlightActiveLine` | `boolean` | 继续 `'basic'` |
| `search` | `boolean | SearchConfig` | 继续 `'basic'` |
| `autocompletion` | `boolean | AutocompletionConfig` | 继续 `'basic'` |
| `tabSize` | `number` | `4` |
| `lint` | `LintSource | { source, config?, gutter? } | null` | 无(`null` 关闭提供者的电线) |
| `keymap` | `readonly KeyBinding[]` | 无(优先级) |

```html
<ngx-code-editor [formField]="f.code" [lineNumbers]="false" [tabSize]="2" [lint]="{ source: myLinter, gutter: true }" />
```

## 错误

每个组件都发出 `error` 带有 `CodeEditorError` (歧视 `code`而不是扔, 并保持它的 目前状态。 在开发模式中,错误也被记录为 `[ngx-codemirror]` 警告 警告他们.

| `code` | 常数 | 何时出院 |
| --- | --- | --- |
| `language-not-found` | `ERROR_LANGUAGE_NOT_FOUND` | `language` 没有在 `languages` (单位:千美元)`available` 列出姓名) |
| `language-load-failed` | `ERROR_LANGUAGE_LOAD_FAILED` | 装入语言失败( L)`cause`(中文(简体) ) |
| `invalid-theme` | `ERROR_INVALID_THEME` | 未知的主题名称( N)`available`(中文(简体) ) |
| `theme-load-failed` | `ERROR_THEME_LOAD_FAILED` | 装入懒人主题失败( L)`cause`(中文(简体) ) |
| `extension-load-failed` | `ERROR_EXTENSION_LOAD_FAILED` | 装入懒惰扩展失败( L)`source`, (中文(简体) ), `cause`(中文(简体) ) |
| `unknown-preset` | `ERROR_UNKNOWN_PRESET` | 未知的预设名称( N)`available`(中文(简体) ) |
| `invalid-indent-unit` | `ERROR_INVALID_INDENT_UNIT` | 无效 `indentUnit` (单位:千美元)`value`; 使用默认值 |

```typescript
onError(error: CodeEditorError): void {
  if (error.code === ERROR_LANGUAGE_NOT_FOUND) console.warn(error.message, error.available);
}
```

## 程序化 API

获取组件与 `viewChild()` 并使用其信号和方法:

```typescript
private readonly editor = viewChild.required(CodeEditorComponent);

format(): void {
  const code = this.editor().getValue();
  this.editor().setValue(prettify(code)); // emits valueChange once
  this.editor().focus();
}
```

| 成员 | 编辑/统一 | Diff 编辑器 |
| --- | --- | --- |
| `view()` 编号 : `mergeView()` | `EditorView | undefined` | `MergeView | undefined` |
| `ready` 产出 | 发射 `EditorView` | 发射 `MergeView` |
| `focus()` | 焦点编辑器 | 聚焦修改的侧面 |
| `getValue()` 编号 : `setValue()` | `string` | `{ original, modified }` |
| `goToNextChunk()` 编号 : `goToPreviousChunk()` | 只统一 | 在已修改的一侧移动 |
| `getChunks()` | 只统一 | 更改块 |

视图是在第一次提交之后创建的(`afterNextRender`),这样 `view()` 实值 `undefined` 在服务器上及之前 `ready` 发射.

## 组件 API

### 共享投入

所有三个组成部分都采用了这些投入,加上: [便利投入](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-convenience-inputs)。 。 。 .

| 投入 | 类型 | 说明 |
| --- | --- | --- |
| `disabled` | `boolean` | 不编辑和只读 . |
| `readonly` | `boolean` | 仅可读取,但可专注并选择. |
| `invalid` 编号 : `required` 编号 : `touched` | `boolean` | 形式状态,由形式整合设置(`aria-invalid` 编号 : `aria-required`) (中文(简体) ). |
| `theme` | `Theme` | 见 [主题](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-themes)。 。 。 . |
| `placeholder` | `string` | 当文档为空时显示( diff 编辑器的修改侧面) . |
| `indentWithTab` | `boolean` | Tab 键缩进 . |
| `indentUnit` | `number | string` | 空间(`0` = 默认)或空白字符串,例如 `'\t'`。 。 。 . |
| `lineWrapping` | `boolean` | 包长行. |
| `highlightWhitespace` | `boolean` | 突出显示空白字符. |
| `languages` | `readonly LanguageDescription[]` | 语言 `language` 被抬起来. |
| `language` | `string` | 语言名称或别名(大小写不敏感). |
| `setup` | `'basic' | 'minimal' | null` | 内置设置. 默认 `'basic'`。 。 。 . |
| `presets` | `readonly string[]` | 注册的预设 `withExtensionPresets()`。 。 。 . |

共享产出: `touch` (在模糊上,标出一个被接入的束缚地)和 `error` (单位:千美元)`CodeEditorError`) (中文(简体) ).

### `ngx-code-editor`

| 投入/产出 | 类型 | 说明 |
| --- | --- | --- |
| `value` | `model<string>` | 该文件。 双向可约束;被形式集成所使用. |
| `extensions` | `ExtensionInput` | 额外的扩展,渴望或懒惰. |
| `root` | `Document | ShadowRoot` | DOM 根 (创建时读取). |
| `autoFocus` | `boolean` | 使编辑专注于创作. |
| `(valueChange)` | `string` | 用户编辑( 程序书写不发出) . |
| `(focused)` 编号 : `(blurred)` | `void` | 焦点变化. |
| `(ready)` | `EditorView` | 该视图被创建. |

### `ngx-code-diff-editor`

| 投入/产出 | 类型 | 说明 |
| --- | --- | --- |
| `value` | `model<DiffEditorModel>` | 这两份文件, `{ original, modified }`用表格来工作. |
| `originalValue` 编号 : `modifiedValue` | `string` | 一方;这些和 `value` 赢了. |
| `originalExtensions` 编号 : `modifiedExtensions` | `ExtensionInput` | 每侧外延. |
| `originalReadonly` | `boolean` | 只让原面只读. |
| `orientation` | `'a-b' | 'b-a'` | 哪个文档先显示 . |
| `revertControls` | `'a-to-b' | 'b-to-a'` | 在已更改块间还原按钮 . |
| `renderRevertControl` | `() => HTMLElement` | 打开回放按钮. |
| `highlightChanges` | `boolean` | 重点更改了文本 。 默认 `true`。 。 。 . |
| `gutter` | `boolean` | 换行旁边的Gutter标记. 默认 `true`。 。 。 . |
| `collapseUnchanged` | `{ margin?, minSize? }` | 折叠不变的文本. |
| `diffConfig` | `DiffConfig` | Diff算法的选项 . |
| `(valueChange)` | `DiffEditorModel` | 任一边的用户编辑 . |
| `(originalValueChange)` 编号 : `(modifiedValueChange)` | `string` | 用户在一边编辑 . |
| `(originalFocused)` 编号 : `(originalBlurred)` | `void` | 专注原侧. |
| `(modifiedFocused)` 编号 : `(modifiedBlurred)` | `void` | 重心修行边. |
| `(ready)` | `MergeView` | 合并视图创建 . |

### `ngx-code-unified-diff-editor`

它需要投入和产出 `ngx-code-editor` (单位:千美元)`value` 是已修改的文档,加上:

| 投入/产出 | 类型 | 说明 |
| --- | --- | --- |
| `original` | `model<string>` | 与此相对. 接受块更新它( A)`[(original)]`) (中文(简体) ). |
| `mergeControls` | `boolean | (type, action) => HTMLElement` | 接受/拒绝按钮。 默认 `true`。 。 。 . |
| `highlightChanges` | `boolean` | 重点更改了文本 。 默认 `true`。 。 。 . |
| `gutter` | `boolean` | 换行旁边的Gutter标记. 默认 `true`。 。 。 . |
| `syntaxHighlightDeletions` | `boolean` | 语法高亮已删除行。 默认 `true`。 。 。 . |
| `allowInlineDiffs` | `boolean` | 显示小的内行变化 。 默认 `false`。 。 。 . |
| `collapseUnchanged` | `{ margin?, minSize? }` | 折叠不变的文本. |
| `diffConfig` | `DiffConfig` | Diff算法的选项 . |

```html
<ngx-code-unified-diff-editor [(original)]="original" [(value)]="modified" language="typescript" [languages]="languages" />
```

## 从21.x移走

22.0.0包含断裂变化。 检查每个项目 [变化](https://npmcn.com/package/%40fsegurai/ngx-codemirror/CHANGELOG.md) 全部列出.

1.  **最低版本 :** 角质 `^22` (包括 `@angular/forms`),类型脚本 `6.0`,节点.js `>=24.15` 联 合 国 工作空间工具.
    
2.  **新的同伴依赖性 :** 安装 `@codemirror/autocomplete`, (中文(简体) ), `@codemirror/commands`, (中文(简体) ), `@codemirror/language`, (中文(简体) ), `@codemirror/lint`, (中文(简体) ), `@codemirror/merge`, (中文(简体) ), `@codemirror/search`, (中文(简体) ), `@codemirror/state`, (中文(简体) ), `@codemirror/view` 财务报告和审定财务报表 `codemirror` (见 [安装](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-installation)) (中文(简体) ). `@codemirror/language-data` 不再由图书馆安装.
    
3.  **`CodeEditorModule` 删除 :** 导入 `CodeEditorComponent`, (中文(简体) ), `CodeDiffEditorComponent` 或者说 `CodeUnifiedDiffEditorComponent` 直接说.
    
4.  **表单 :** 组件执行信号表 `FormValueControl` 改为 `ControlValueAccessor` (单位:千美元)`NG_VALUE_ACCESSOR` 已经走了. `[formField]`, (中文(简体) ), `formControlName`, (中文(简体) ), `[formControl]` 财务报告和审定财务报表 `[(ngModel)]` 继续工作. 代码调用 `writeValue()`, (中文(简体) ), `registerOnChange()`, (中文(简体) ), `registerOnTouched()` 或者说 `setDisabledState()` 必须设置 `value` 或者说 `disabled` 换句话说.
    
5.  **重命名的产出** (他们与本地DOM事件相冲突):
    
    | 构成部分 | 21.x (中文(简体) ) | 22.x 电话 |
    | --- | --- | --- |
    | 编辑器 | `(change)` | `(valueChange)` |
    | 编辑器 | `(focus)` 编号 : `(blur)` | `(focused)` 编号 : `(blurred)` |
    | diff 编辑器 | `(originalFocus)` 编号 : `(originalBlur)` | `(originalFocused)` 编号 : `(originalBlurred)` |
    | diff 编辑器 | `(modifiedFocus)` 编号 : `(modifiedBlur)` | `(modifiedFocused)` 编号 : `(modifiedBlurred)` |
    
6.  **`value` 是一个 `model()`** 只有用户编辑发送 `valueChange`。 。 。 . **`disabled` 是输入**数字 : `[(disabled)]` 财务报告和审定财务报表 `(disabledChange)` ,而一个被禁用的编辑器也只读. **`focus` 现在是一种方法.**
    
7.  **出错, 不登录 :** 处理新 `error` 输出。 一个未知 `language`,语言负载失败, 未知的主题名称和无效 `indentUnit` 发射 `error` 保存当前状态;控制台输出为 a 仅限dev-mode警告.
    
8.  **输入默认为 `undefined`** 这样 `provideCodeEditor()` ;有效默认值不变. 现在直接看到输入信号的代码 `undefined` 当未设定时.
    
9.  **`setup="basic"`** 不再包括行号,折叠地沟,活行行,搜索和自动补全: 他们是 [便利投入](https://npmcn.com/package/%40fsegurai/ngx-codemirror/#readme-convenience-inputs),默认时使用 `'basic'`编辑器 等同; 设置输入到 `false` 要删除这部分.
    
10.  **`Theme`** 接受 `'dark'`, (中文(简体) ), `'auto'` 和注册名称; 未知的字符串输出 `invalid-theme` 改为 被传给了CodeMirror. **`indentUnit`** 实值 `number | string`。 。 。 .
     

## 解析应用程序

要看到组件在行动,检查 [演示](https://fsegurai.github.io/ngx-codemirror)。 。 。 .

本地设置演示:

```bash
git clone https://github.com/fsegurai/ngx-codemirror.git
cd ngx-codemirror
bun install
bun start
```

这为应用程序服务于 [http://localhost:4200 (英语)](http://localhost:4200/)。 。 。 .

## 许可证

许可证根据 [麻省理工学院](https://opensource.org/licenses/MIT)。 。 。 .

## 常见问题

### @fsegurai/ngx-codemirror 是什么？

使用代码解码器创建代码编辑器的角库

### 如何安装 @fsegurai/ngx-codemirror？

在项目目录运行 npm install @fsegurai/ngx-codemirror，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：codemirror（^6\.0\.2）、@angular/core（^22\.0\.0）、@angular/forms（^22\.0\.0）、@angular/common（^22\.0\.0）、@codemirror/lint（^6\.9\.7）、@codemirror/view（^6\.43\.13）、@codemirror/merge（^6\.12\.2）、@codemirror/state（^6\.7\.6）、@codemirror/search（^6\.7\.2）、@codemirror/commands（^6\.11\.1）、@codemirror/language（^6\.12\.4）、@codemirror/autocomplete（^6\.20\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fsegurai/ngx-codemirror 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fsegurai/ngx-codemirror 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @fsegurai/ngx-codemirror 可以商用吗？

@fsegurai/ngx-codemirror 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fsegurai/ngx-codemirror 的下载量有多少？

根据 npm 官方下载统计，@fsegurai/ngx-codemirror 在 2026/10/16 – 2026/11/14 这 30 天内被下载 5,513 次，日均约 184 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fsegurai/ngx-codemirror 还在维护吗？

最新版本 22\.0\.0 发布于 2026/10/15（1 个月前）；至今共发布 13 个版本，其中过去 12 个月发布了 3 个；首次发布于 2024/12/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。