Code Editor

@aiao/code-editor 系列提供基于 CodeMirror 6 的跨框架代码编辑器，支持 100+ 种语言高亮、暗色主题、动态语言切换。

架构

@aiao/code-editor            ← 核心：语言定义 + 类型
├── @aiao/code-editor-angular ← Angular 组件 + ControlValueAccessor
├── @aiao/code-editor-react   ← React 受控组件
└── @aiao/code-editor-vue     ← Vue SFC + v-model

安装

npm
Yarn
pnpm
Bun

# 核心包（自动安装）
npm install @aiao/code-editor

# 选择框架
npm install @aiao/code-editor-angular  # Angular
npm install @aiao/code-editor-react    # React
npm install @aiao/code-editor-vue      # Vue

# 核心包（自动安装）
yarn add @aiao/code-editor

# 选择框架
yarn add @aiao/code-editor-angular # Angular
yarn add @aiao/code-editor-react # React
yarn add @aiao/code-editor-vue # Vue

# 核心包（自动安装）
pnpm add @aiao/code-editor

# 选择框架
pnpm add @aiao/code-editor-angular # Angular
pnpm add @aiao/code-editor-react # React
pnpm add @aiao/code-editor-vue # Vue

# 核心包（自动安装）
bun add @aiao/code-editor

# 选择框架
bun add @aiao/code-editor-angular # Angular
bun add @aiao/code-editor-react # React
bun add @aiao/code-editor-vue # Vue

支持语言

内置 16 种常用语言，并合并 @codemirror/language-data 的 100+ 种语言（按需加载）：

语言	代码	扩展名	底层包
CSS	`css`	`.css`	`@codemirror/lang-css`
HTML	`html`	`.html`, `.htm`	`@codemirror/lang-html`
XML	`xml`	`.xml`	`@codemirror/lang-xml`
JavaScript	`javascript`	`.js`, `.mjs`, `.cjs`	`@codemirror/lang-javascript`
JSX	`jsx`	`.jsx`	`@codemirror/lang-javascript`
TypeScript	`typescript`	`.ts`, `.mts`, `.cts`	`@codemirror/lang-javascript`
TSX	`tsx`	`.tsx`	`@codemirror/lang-javascript`
JSON	`json`	`.json`, `.map`	`@codemirror/lang-json`
SCSS	`scss`	`.scss`	`@codemirror/lang-sass`
Sass	`sass`	`.sass`	`@codemirror/lang-sass`
Python	`python`	`.py`, `.pyw`	`@codemirror/lang-python`
Markdown	`markdown`	`.md`	`@codemirror/lang-markdown`
SQL	`sql`	`.sql`	`@codemirror/lang-sql`
SQLite	`sqlite`	—	`@codemirror/lang-sql`
PostgreSQL	`postgresql`	—	`@codemirror/lang-sql`

使用 SUPPORT_LANGUAGES 常量获取完整语言列表：

import { SUPPORT_LANGUAGES } from '@aiao/code-editor';

主题

主题	说明
`'light'`	CodeMirror 默认浅色主题
`'dark'`	One Dark 暗色主题（`@codemirror/theme-one-dark`）

通过 Compartment 机制动态切换，无需重建编辑器实例。

通用配置

所有框架共享以下配置项：

配置	类型	默认值	说明
`value`	`string`	`''`	编辑器内容
`language`	`string`	—	语言名称（大小写不敏感）
`theme`	`'light' \| 'dark'`	`'light'`	主题
`placeholder`	`string`	`''`	占位文本
`readonly`	`boolean`	`false`	只读模式
`disabled`	`boolean`	`false`	禁用编辑
`setup`	`'basic' \| 'minimal'`	`'basic'`	预设扩展包
`indentWithTab`	`boolean`	`false`	启用 Tab 缩进
`indentUnit`	`string`	`''`	缩进单位字符串
`lineWrapping`	`boolean`	`false`	自动换行
`highlightWhitespace`	`boolean`	`false`	高亮空白字符

Setup 预设

值	说明
`'basic'`	完整编辑体验（行号、代码折叠、括号匹配等）
`'minimal'`	精简模式（适合嵌入式场景）
`null`	无预设（仅 Angular 支持）

跨框架对比

特性	Angular	React	Vue
双向绑定	ControlValueAccessor	`value` + `onChange`	`v-model:value`
Focus/Blur 事件	`aoFocus`/`aoBlur`	—	—
autoFocus	✅	—	—
自定义语言列表	`languages` input	—	—
Shadow DOM	`root` input	—	—
setup=null	✅	—	—
SSR 安全	✅ `isPlatformBrowser`	—	—
公共方法	`set*()` 方法	—	—
默认语言	无	`'sql'`	`'sql'`

架构​

安装​

支持语言​

主题​

通用配置​

Setup 预设​

跨框架对比​

架构

安装

支持语言

主题

通用配置

Setup 预设

跨框架对比