CodeEditor

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

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

aoBlur

aoBlur: OutputEmitterRef<void>;

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

aoChange

aoChange: OutputEmitterRef<string>;

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

aoFocus

aoFocus: OutputEmitterRef<void>;

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

autoFocus

autoFocus: InputSignalWithTransform<boolean, unknown>;

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

disabled

disabled: InputSignalWithTransform<boolean, unknown>;

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

highlightWhitespace

highlightWhitespace: InputSignalWithTransform<boolean, unknown>;

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

indentUnit

indentUnit: InputSignal<string>;

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

indentWithTab

indentWithTab: InputSignalWithTransform<boolean, unknown>;

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

language

language: InputSignal<string>;

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

languages

languages: InputSignal<readonly CodeEditorLanguageDescription[]>;

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

lineWrapping

lineWrapping: InputSignalWithTransform<boolean, unknown>;

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

onChange?

optional onChange?: (value) => void;

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

Parameters

Parameter	Type
`value`	`string`

Returns

void

onTouched?

optional onTouched?: () => void;

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

Returns

void

placeholder

placeholder: InputSignal<string>;

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

readonly

readonly: InputSignalWithTransform<boolean, unknown>;

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

root

root: InputSignal<Document | ShadowRoot | undefined>;

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

setup

setup: InputSignal<CodeEditorSetup>;

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

theme

theme: InputSignal<CodeEditorTheme>;

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

useDisabled

useDisabled: WritableSignal<boolean>;

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

value

value: InputSignal<string>;

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

Methods

_dispatch_effects()

protected _dispatch_effects(effects): void | undefined;

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

Parameters

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

Returns

void | undefined

_find_language()

protected _find_language(name): 
  | CodeEditorLanguageDescription
  | null;

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

Parameters

Parameter	Type
`name`	`string`

Returns

| CodeEditorLanguageDescription | null

_get_all_extensions()

protected _get_all_extensions(): Extension[];

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

Returns

Extension[]

ngOnChanges()

ngOnChanges(changes): void;

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

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:199

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:133

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:215

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:219

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:223

Parameters

Parameter	Type	Description
`isDisabled`	`boolean`	The disabled status to set on the element

Returns

void

Description

Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.

Usage Notes

The following is an example of writing the disabled property to a native DOM element:

setDisabledState(isDisabled: boolean): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}

Implementation of

ControlValueAccessor.setDisabledState

setEditable()

setEditable(value): void;

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

Parameters

Parameter	Type
`value`	`boolean`

Returns

void

setExtensions()

setExtensions(value): void;

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

Parameters

Parameter	Type
`value`	`Extension`[]

Returns

void

setHighlightWhitespace()

setHighlightWhitespace(value): void;

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

Parameters

Parameter	Type
`value`	`boolean`

Returns

void

setIndentUnit()

setIndentUnit(value): void;

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

Parameters

Parameter	Type
`value`	`string`

Returns

void

setIndentWithTab()

setIndentWithTab(value): void;

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

Parameters

Parameter	Type
`value`	`boolean`

Returns

void

setLanguage()

setLanguage(lang): void;

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

Parameters

Parameter	Type
`lang`	`string`

Returns

void

setLineWrapping()

setLineWrapping(value): void;

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

Parameters

Parameter	Type
`value`	`boolean`

Returns

void

setPlaceholder()

setPlaceholder(value): void;

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

Parameters

Parameter	Type
`value`	`string`

Returns

void

setReadonly()

setReadonly(value): void;

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

Parameters

Parameter	Type
`value`	`boolean`

Returns

void

setTheme()

setTheme(value): void;

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

Parameters

Parameter	Type
`value`	`CodeEditorTheme`

Returns

void

setValue()

setValue(value, external?): void;

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

Parameters

Parameter	Type	Default value
`value`	`string`	`undefined`
`external`	`boolean`	`false`

Returns

void

writeValue()

writeValue(value): void;

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

Parameters

Parameter	Type
`value`	`string` \| `null`

Returns

void

Description

Writes a new value to the element.

This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

Usage Notes

Write a value to the element

The following example writes a value to the native DOM element.

writeValue(value: any): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
}

Implementation of

ControlValueAccessor.writeValue

Example​

Implements​

Constructors​

Constructor​

Returns​

Properties​

aoBlur​

aoChange​

aoFocus​

autoFocus​

disabled​

highlightWhitespace​

indentUnit​

indentWithTab​

language​

languages​

lineWrapping​

onChange?​

Parameters​

Returns​

onTouched?​

Returns​

placeholder​

readonly​

root​

setup​

theme​

useDisabled​

value​

Methods​

_dispatch_effects()​

Parameters​

Returns​

_find_language()​

Parameters​

Returns​

_get_all_extensions()​

Returns​

ngOnChanges()​

Parameters​

Returns​

Implementation of​

ngOnDestroy()​

Returns​

Implementation of​

ngOnInit()​

Returns​

Implementation of​

registerOnChange()​

Parameters​

Returns​

Description​

Usage Notes​

Store the change function​

Implementation of​

registerOnTouched()​

Parameters​

Returns​

Description​

Usage Notes​

Store the callback function​

Implementation of​

setDisabledState()​

Parameters​

Returns​

Description​

Usage Notes​

Implementation of​

setEditable()​

Parameters​

Returns​

setExtensions()​

Parameters​

Returns​

setHighlightWhitespace()​

Parameters​

Returns​

setIndentUnit()​

Parameters​

Returns​

Example

Implements

Constructors

Constructor

Returns

Properties

aoBlur

aoChange

aoFocus

autoFocus

disabled

highlightWhitespace

indentUnit

indentWithTab

language

languages

lineWrapping

onChange?

Parameters

Returns

onTouched?

Returns

placeholder

readonly

root

setup

theme

useDisabled

value

Methods

_dispatch_effects()

Parameters

Returns

_find_language()

Parameters

Returns

_get_all_extensions()

Returns

ngOnChanges()

Parameters

Returns

Implementation of

ngOnDestroy()

Returns

Implementation of

ngOnInit()

Returns

Implementation of

registerOnChange()

Parameters

Returns

Description

Usage Notes

Store the change function

Implementation of

registerOnTouched()

Parameters

Returns

Description

Usage Notes

Store the callback function

Implementation of

setDisabledState()

Parameters

Returns

Description

Usage Notes

Implementation of

setEditable()

Parameters

Returns

setExtensions()

Parameters

Returns

setHighlightWhitespace()

Parameters

Returns

setIndentUnit()

Parameters

Returns