AiCodeEditor Monaco Editor

AiCodeEditor is a high-performance code editor component based on Monaco Editor. It retains the VS Code-level editing experience and is perfectly integrated into source code editing scenarios in AI dialogue flows. It supports multi-language syntax highlighting, autocompletion, and multiple themes.

Basic Usage

Use v-model for two-way binding, and control the size via height.

Language Switching & Readonly

Supports dynamic language switching and readonly mode.

JSTSCSSHTML

API

Props

Property	Description	Type	Default
v-model / modelValue	Code content	string	''
initialValue	Initial code (priority over modelValue for first screen)	string	undefined
language	Programming language	string	'javascript'
readonly	Whether it is read-only	boolean	false
theme	Editor theme	'vs' | 'vs-dark' | 'hc-black'	'vs-dark'
height	Editor height	string | number	300
minimap	Whether to show Minimap	boolean	false
wordWrap	Auto word wrap	'on' | 'off' | 'wordWrapColumn' | 'bounded'	'on'
fontSize	Font size	number	14
tabSize	Tab width	number	2
autofocus	Auto focus on mount	boolean	true
themeOverrides	Theme override variables	ComponentThemeVars	undefined

Events

Event Name	Description	Parameters
update:modelValue	Triggered when code content changes	(value: string) => void
change	Triggered when code content changes	(value: string) => void
mount	Triggered when editor is mounted	() => void
dispose	Triggered when editor is disposed	() => void

Methods

Method Name	Description	Parameters
getEditor	Get Monaco editor instance	() => IStandaloneCodeEditor
focus	Set focus to the editor	() => void
setValue	Set code content manually	(value: string) => void
getValue	Get current code content	() => string