CodeEditor

Defined in: code-editor-angular/src/code-editor.ts:98

CodeEditor Angular 组件

基于 CodeMirror 6 的代码编辑器 Angular 组件，支持多种语言和主题

Example

<ao-code-editor
  [(ngModel)]="code"
  language="typescript"
  theme="dark"
  (aoChange)="onCodeChange($event)"
/>

Implements

• OnInit
• ControlValueAccessor
• OnDestroy
• OnChanges

Constructors

Constructor

new CodeEditor(): CodeEditor;

Returns

CodeEditor

Properties

_ariaDisabled

protected readonly _ariaDisabled: Signal<"true" | null>;

Defined in: code-editor-angular/src/code-editor.ts:187

Internal

宿主元素上的 aria-disabled。

未禁用时返回 null 让 Angular 移除属性，而不是写 aria-disabled="false"； 理由与 buildCodeEditorContentAttributes 一致。protected 是可见性下限 —— host 绑定表达式读不到 # 私有字段。

---

aoBlur

aoBlur: OutputEmitterRef<void>;

Defined in: code-editor-angular/src/code-editor.ts:254

编辑器失去焦点，同时触发表单 touched。

---

aoChange

aoChange: OutputEmitterRef<string>;

Defined in: code-editor-angular/src/code-editor.ts:252

文档内容变化（外部写入不触发，见 External）。

---

aoFocus

aoFocus: OutputEmitterRef<void>;

Defined in: code-editor-angular/src/code-editor.ts:250

编辑器获得焦点。

---

aoLanguageError

aoLanguageError: OutputEmitterRef<CodeEditorLanguageError>;

Defined in: code-editor-angular/src/code-editor.ts:264

语言解析或加载失败。

Remarks

CEA-007：这条路径此前只有一条 console.error，宿主完全观测不到 —— 拿不到错误、没有重试或降级的机会，用户只看到高亮突然消失。 降级策略不变（清空语言扩展退回纯文本），日志也保留，本事件是新增的观测通道。 与 React 的 onLanguageError 属性、Vue 的 language-error 事件同载荷。

---

autoFocus

autoFocus: InputSignalWithTransform<boolean, unknown>;

Defined in: code-editor-angular/src/code-editor.ts:191

初始化后立即聚焦编辑器。仅初始化生效，后续变更被忽略。

Default Value

false

---

describedBy

describedBy: InputSignal<string>;

Defined in: code-editor-angular/src/code-editor.ts:199

补充说明元素的 id，写成内部 textbox 的 aria-describedby。可动态更新。

Default Value

''（空串按「未设置」处理，不产出属性）

Remarks

属性落在 CodeMirror 的 .cm-content 上 —— 承担 role="textbox" 的是它， 不是本组件的宿主元素。三端同名同义。

---

disabled

disabled: InputSignalWithTransform<boolean, unknown>;

Defined in: code-editor-angular/src/code-editor.ts:208

禁用编辑（只读且不可聚焦）。可动态更新。

Default Value

false

Remarks

与表单的 setDisabledState() 是两条独立来源，任一为真即禁用。 用 Reactive Forms 时把控件设成 disabled 与在模板上写 [disabled]="true" 效果一样， 但只解开其中一条不会恢复可编辑 —— 两条都得放开。

---

highlightWhitespace

highlightWhitespace: InputSignalWithTransform<boolean, unknown>;

Defined in: code-editor-angular/src/code-editor.ts:210

显示空白字符。可动态更新。

Default Value

false

---

indentUnit

indentUnit: InputSignal<string>;

Defined in: code-editor-angular/src/code-editor.ts:212

一级缩进使用的字符串。可动态更新。

Default Value

'  '（两个空格，三端一致）

---

indentWithTab

indentWithTab: InputSignalWithTransform<boolean, unknown>;

Defined in: code-editor-angular/src/code-editor.ts:214

允许 Tab 键缩进（会牺牲键盘可达性）。可动态更新。

Default Value

false

---

label

label: InputSignal<string>;

Defined in: code-editor-angular/src/code-editor.ts:225

可访问名称，写成内部 textbox 的 aria-label。可动态更新。

Default Value

''（空串按「未设置」处理，不产出属性）

Remarks

落点与 CodeEditor.describedBy 相同。

---

labelledBy

labelledBy: InputSignal<string>;

Defined in: code-editor-angular/src/code-editor.ts:232

承担标签的元素 id，写成内部 textbox 的 aria-labelledby。可动态更新。

Default Value

''（空串按「未设置」处理，不产出属性）

Remarks

落点与 CodeEditor.describedBy 相同。

---

language

language: InputSignal<string>;

Defined in: code-editor-angular/src/code-editor.ts:216

语法高亮语言名，取值见 languages；'plaintext' 表示不高亮。可动态更新。

Default Value

'sql'

---

languages

languages: InputSignal<readonly CodeEditorLanguageDescription[]>;

Defined in: code-editor-angular/src/code-editor.ts:218

可选语言列表。可动态更新。

Default Value

SUPPORT_LANGUAGES

---

lineWrapping

lineWrapping: InputSignalWithTransform<boolean, unknown>;

Defined in: code-editor-angular/src/code-editor.ts:234

自动换行。可动态更新。

Default Value

false

---

placeholder

placeholder: InputSignal<string>;

Defined in: code-editor-angular/src/code-editor.ts:236

空文档时显示的占位文本。可动态更新。

Default Value

''

---

readonly

readonly: InputSignalWithTransform<boolean, unknown>;

Defined in: code-editor-angular/src/code-editor.ts:238

只读（仍可聚焦与选择）。可动态更新。

Default Value

false

---

root

root: InputSignal<Document | ShadowRoot | undefined>;

Defined in: code-editor-angular/src/code-editor.ts:240

CodeMirror 挂载的 DOM 根，用于 Shadow DOM 场景。仅初始化生效。

---

setup

setup: InputSignal<CodeEditorSetup>;

Defined in: code-editor-angular/src/code-editor.ts:242

预设扩展集；null 表示不加载任何预设。可动态更新。

Default Value

'basic'

---

theme

theme: InputSignal<CodeEditorTheme>;

Defined in: code-editor-angular/src/code-editor.ts:244

主题。可动态更新。

Default Value

'light'

---

value

value: InputSignal<string>;

Defined in: code-editor-angular/src/code-editor.ts:246

文档内容。作为受控输入使用时由外部驱动；与 ngModel 同时使用以 ngModel 为准。

Default Value

''

Accessors

host

Get Signature

get host(): HTMLElement | null;

Defined in: code-editor-angular/src/code-editor.ts:282

CodeMirror 挂载所在的宿主元素；未初始化或已销毁时为 null。

Remarks

Angular 的宿主是 <ao-code-editor> 元素本身，React / Vue 是组件渲染出的 div—— 类型不同但语义一致：「CodeMirror 挂在哪个元素里」。

Returns

HTMLElement | null

---

view

Get Signature

get view(): EditorView | null;

Defined in: code-editor-angular/src/code-editor.ts:271

底层 CodeMirror EditorView；未初始化或已销毁时为 null。

Remarks

三端命令式面统一为 view / host / focus() / blur()（CEA-009）。

Returns

EditorView | null

Methods

_dispatch_effects()

protected _dispatch_effects(effects): void | undefined;

Defined in: code-editor-angular/src/code-editor.ts:524

Parameters

Parameter	Type
effects	| StateEffect<unknown> | readonly StateEffect<unknown>[]

Returns

void | undefined

---

_get_all_extensions()

protected _get_all_extensions(): Extension[];

Defined in: code-editor-angular/src/code-editor.ts:502

Returns

Extension[]

---

blur()

blur(): void;

Defined in: code-editor-angular/src/code-editor.ts:292

移开键盘焦点。未初始化时是空操作。

Returns

void

---

focus()

focus(): void;

Defined in: code-editor-angular/src/code-editor.ts:287

把键盘焦点交给编辑器。未初始化时是空操作。

Returns

void

---

ngOnChanges()

ngOnChanges(changes): void;

Defined in: code-editor-angular/src/code-editor.ts:330

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

Parameters

Parameter	Type	Description
changes	{ [propName: string]: SimpleChange<any>; }	The changed properties.

Returns

void

Implementation of

OnChanges.ngOnChanges

---

ngOnDestroy()

ngOnDestroy(): void;

Defined in: code-editor-angular/src/code-editor.ts:385

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

Returns

void

Implementation of

OnDestroy.ngOnDestroy

---

ngOnInit()

ngOnInit(): void;

Defined in: code-editor-angular/src/code-editor.ts:296

A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

Returns

void

Implementation of

OnInit.ngOnInit

---

registerOnChange()

registerOnChange(fn): void;

Defined in: code-editor-angular/src/code-editor.ts:421

Parameters

Parameter	Type	Description
fn	(value) => void	The callback function to register

Returns

void

Description

Registers a callback function that is called when the control's value changes in the UI.

This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.

When implementing the registerOnChange method in your own value accessor, save the given function so your class calls it at the appropriate time.

Usage Notes

Store the change function

The following example stores the provided function as an internal method.

registerOnChange(fn: (_: any) => void): void {
  this._onChange = fn;
}

When the value changes in the UI, call the registered function to allow the forms API to update itself:

host: {
   '(change)': '_onChange($event.target.value)'
}

Implementation of

ControlValueAccessor.registerOnChange

---

registerOnTouched()

registerOnTouched(fn): void;

Defined in: code-editor-angular/src/code-editor.ts:425

Parameters

Parameter	Type	Description
fn	() => void	The callback function to register

Returns

void

Description

Registers a callback function that is called by the forms API on initialization to update the form model on blur.

When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".

Usage Notes

Store the callback function

The following example stores the provided function as an internal method.

registerOnTouched(fn: any): void {
  this._onTouched = fn;
}

On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:

host: {
   '(blur)': '_onTouched()'
}

Implementation of

ControlValueAccessor.registerOnTouched

---

setDisabledState()

setDisabledState(isDisabled): void;

Defined in: code-editor-angular/src/code-editor.ts:435

表单侧的禁用开关，由 Angular Forms 调用。

Parameters

Parameter	Type
isDisabled	boolean

Returns

void

Remarks

只写 CodeEditor.#formDisabled 这一条来源；模板上的 [disabled] 输入是另一条独立来源，两者取或，见 CodeEditor.#effectiveDisabled。

Implementation of

ControlValueAccessor.setDisabledState

---

setExtensions()

setExtensions(value): void;

Defined in: code-editor-angular/src/code-editor.ts:452

装入消费者自己的 CodeMirror 扩展。

Parameters

Parameter	Type	Description
value	Extension[]	本次要生效的扩展；整体替换上一次传入的那批，传 [] 即全部撤下

Returns

void

Remarks

CEA-003：早先这里发的是全局 StateEffect.reconfigure.of(value)， 它替换的是整棵扩展树 —— 一次调用就清掉 updateListener、全部 Compartment、 主题、语言与 a11y 属性，名字叫「设置扩展」，实际是「摧毁编辑器配置」。 现在只重配 CodeEditor.#userExtensionsConf 这一个专属槽， 组件自身的配置与消费者的扩展互不影响。

---

setLanguage()

setLanguage(lang): void;

Defined in: code-editor-angular/src/code-editor.ts:469

命令式地（重新）应用语言配置。

Parameters

Parameter	Type	Description
lang	string	语言名或别名；空串与 'plaintext' 表示不高亮

Returns

void

Remarks

无条件重新加载，即使解析结果与当前生效的完全一致 —— 这是宿主换掉了同名描述 背后的 loader 实现时的显式重载入口，language 输入做不到（它走的是 CodeEditor.#syncLanguage 里的等价性判断，CEA-006，不会重复加载）。 日常切换语言应当改 language 输入。

解析失败时清空语言扩展退回纯文本，并经 CodeEditor.aoLanguageError 报告。

---

writeValue()

writeValue(value): void;

Defined in: code-editor-angular/src/code-editor.ts:405

ControlValueAccessor 的写入入口，由 Angular Forms 调用。

Parameters

Parameter	Type	Description
value	unknown	null / undefined 规整成空串；string 原样写入

Returns

void

Throws

TypeError 收到其他类型时立即抛出，错误信息含包名与实际类型

Remarks

CEA-005：签名此前写成 string | null，但 CVA 的契约是 any —— Angular 不做运行时校验，FormControl 里放什么就原样送到这里。类型标注只骗过了编译期。 于是 FormControl(42) 在初始化前进 #pendingValue、在 EditorState.create 处炸， 初始化后又在 computeMinimalDocumentChange 处炸 —— 同一个错误配置，两个时机两种错， 且都指不回 writeValue。现在两个时机抛同一个错，且直接点名包与类型。

Implementation of

ControlValueAccessor.writeValue