# @acrodata/code-editor 中文文档

规范地址：https://npmcn.com/package/%40acrodata/code-editor/

版本：0\.6\.1
npm 元数据更新时间：2026-03-23T09:35:39.106Z
中文译文更新时间：2026-11-05T19:31:28.682Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40acrodata/code-editor
原文对照：https://npmcn.com/package/%40acrodata/code-editor/?lang=original
项目主页：https://acrodata.github.io/code-editor/
源码仓库：https://github.com/acrodata/code-editor

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

- 包体积（解压后）：88.1 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：@angular/core \>=16\.0\.0，@angular/forms \>=16\.0\.0
- 首次发布：2024-05-24T15:32:26.026Z
- 最新版本发布：2026-03-23T09:35:38.954Z
- 近 30 天下载量：36245（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 2 个）

## 中文简介

Angular 的代码Morr 6 包装

## 安装

```sh
npm install @acrodata/code-editor
```

也可以使用：`pnpm add @acrodata/code-editor`、`yarn add @acrodata/code-editor`、`bun add @acrodata/code-editor`

## README

# 代码编辑器

[![npm](https://img.shields.io/npm/v/@acrodata/code-editor.svg)](https://www.npmjs.com/package/@acrodata/code-editor) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/acrodata/code-editor/blob/main/LICENSE)

![codemirror+angular](https://github.com/acrodata/code-editor/assets/20625845/2a511ccf-bf6a-414b-9f0d-4aafe4a8079b)

Angular 的代码Morr 6 包装

#### 快速链接

[文档](https://github.com/acrodata/code-editor?tab=readme-ov-file#code-editor) | [游戏场](https://acrodata.github.io/code-editor/)

## 安装

```bash
npm install @acrodata/code-editor --save
```

## 使用量

### 代码编辑器

```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CodeEditor } from '@acrodata/code-editor';

@Component({
  selector: 'your-app',
  template: `<code-editor [(ngModel)]="value" />`,
  imports: [FormsModule, CodeEditor],
})
export class YourAppComponent {
  value = `console.log("Hello world")`;
}
```

### Diff 编辑器

```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DiffEditor } from '@acrodata/code-editor';

@Component({
  selector: 'your-app',
  template: `<diff-editor [(ngModel)]="value" />`,
  imports: [FormsModule, DiffEditor],
})
export class YourAppComponent {
  value = {
    original: `bar`;
    modified: `foo`;
  }
}
```

## API 密码

### 代码编辑器

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| \[价值\] | 字符串 | `''` | 编辑价值. |
| \[根 | 文档 QQ 阴影旋转 | `undefined` | 编辑器View [根号](https://codemirror.net/docs/ref/#view.EditorView.root)。 。 。 . |
| \[自动焦点\] | 布尔 | `false` | 是否在输入后聚焦编辑器 . |
| \[残 | 布尔 | `false` | 编辑器是否被禁用 . |
| \[只读\] | 布尔 | `false` | 编辑器是否只读取 . |
| \[主题\] | 主题 | `light` | 编辑主题. |
| \[占位 | 字符串 | `''` | 编辑的占地器. |
| \[缩进与标签\] | 布尔 | `false` | 是否用 Tab 键缩进 . |
| \[缩进单位\] | 字符串 | `''` | 应该是一个字符串,由完全相同的白空间字符组成. |
| \[线 | 布尔 | `false` | 编辑器是否包线 . |
| \[亮白空间\] | 布尔 | `false` | 是否突出显示白空间 . |
| \[语 | 语言描述 \[\] | `[]` | 已知语言描述阵列 [语言数据](https://github.com/codemirror/language-data/blob/main/src/language-data.ts)。 。 。 . |
| \[语 | 字符串 | `''` | 编辑语言. 你应该设置 `languages` 道具开始. |
| \[设置\] | 设置 | `'basic'` | 编辑部内置设置. 值可以设定为 [`basic`](https://codemirror.net/docs/ref/#codemirror.basicSetup), (中文(简体) ), [`minimal`](https://codemirror.net/docs/ref/#codemirror.minimalSetup) 或者说 `null`。 。 。 . |
| \[展 | 扩展\[ \] | `[]` | 会附在根上 [扩展](https://codemirror.net/docs/ref/#state.EditorStateConfig.extensions)。 。 。 . |
| (变动) | 事件Emitter < string> | `-` | 编辑器值变化时事件会释放出 . |
| (重点) | 事件Emitter<void> | `-` | 当焦点放在编辑器上时, 事件会释放出来 . |
| (bl | 事件Emitter<void> | `-` | 当编辑器失去焦点时, 事件会释放出来 . |

### Diff 编辑器

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| \[设置\] | 设置 | `'basic'` | 编辑部内置设置. 值可以设定为 [`basic`](https://codemirror.net/docs/ref/#codemirror.basicSetup), (中文(简体) ), [`minimal`](https://codemirror.net/docs/ref/#codemirror.minimalSetup) 或者说 `null`。 。 。 . |
| \[原作"Value" | 字符串 | `''` | Diff-editor的原始价值. |
| \[原件\] | 扩展\[ \] | `[]` | 合并视图原配置 [扩展](https://codemirror.net/docs/ref/#state.EditorStateConfig.extensions)。 。 。 . |
| \[已修改 | 字符串 | `''` | Diff-editor的修改值. |
| \[修改的扩展\] | 扩展\[ \] | `[]` | 合并视频修改配置 [扩展](https://codemirror.net/docs/ref/#state.EditorStateConfig.extensions)。 。 。 . |
| \[取 | 方向 | `undefined` | 控制是编辑器A还是编辑器B先显示. 默认为 `"a-b"`。 。 。 . |
| \[反转控制\] | 还原控制 | `undefined` | 控制在已更改块之间是否显示还原控制 . |
| \[投降控制\] | 渲染器控制 | `undefined` | 给定时, 调用此函数使按钮返回块 . |
| \[高亮变化\] | 布尔 | `true` | 默认情况下,合并视图会在已修改块中标记插入并删除文本 . |
| \[口 | 布尔 | `true` | 控制是否在已更改行旁显示沟道标记. |
| \[残 | 布尔 | `false` | Diff编辑器是否被禁用 . |
| \[拼接未变\] | {比值? : 数; 分数? : 数} | `undefined` | 给出后,长长的未变文字会倒塌. |
| \[diffConfig\] (英语) | Diff 配置 | `undefined` | 向 diff 算法传递选项 . |
| (原始内容存档于2013-10-10). ValeChane | 事件Emitter < string> | `-` | 当编辑器的原始值改变时事件会释放出 . |
| (原文焦点) | 事件Emitter<void> | `-` | 当焦点集中在原编辑器时, 事件会释放出来 . |
| (原始内容存档于2013-10-12) (中文(简体) ) | 事件Emitter<void> | `-` | 当原始编辑器模糊时, 事件会释放出来 . |
| (已修改的Value Change) | 事件Emitter < string> | `-` | 当编辑器修改值时, 事件会释放 . |
| (修改焦点) | 事件Emitter<void> | `-` | 聚焦到已修改的编辑器时, 事件会释放 . |
| (已修改Blur) | 事件Emitter<void> | `-` | 当修改的编辑器模糊时, 事件会释放 . |

## 许可证

麻省理工学院

## 常见问题

### @acrodata/code-editor 是什么？

Angular 的代码Morr 6 包装

### 如何安装 @acrodata/code-editor？

在项目目录运行 npm install @acrodata/code-editor，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（\>=16\.0\.0）、@angular/forms（\>=16\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @acrodata/code-editor 支持 TypeScript 吗？

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

### @acrodata/code-editor 支持 ESM 还是 CommonJS？

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

### @acrodata/code-editor 可以商用吗？

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

### @acrodata/code-editor 的下载量有多少？

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

### @acrodata/code-editor 还在维护吗？

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