CodeEditor 代碼編輯器

Description

CodeEditor 組件是一個基於 Microsoft Monaco Editor 的程式碼編輯器，支援多種程式語言語法高亮、智能提示、代碼格式化等功能。

基本用法

基本使用

最基本的代碼編輯器使用方式

當前代碼值:

function hello() {
  console.log('Hello World!');
  return 'Hello from Monaco Editor!';
}

// 調用函數
hello();

多語言支援

多語言支持

支援多種程式語言的語法高亮

選擇語言:JavaScriptTypeScriptHTMLCSSJSONPythonJavaC#C++SQL

主題切換

主題切換

支援亮色和暗色主題

選擇主題:Visual Studio LightVisual Studio DarkHigh Contrast BlackHigh Contrast Light

只讀模式

只讀模式

設置為只讀模式的代碼編輯器，無法編輯但可以查看和複製代碼

只讀模式 顯示小地圖

編輯器狀態:

• 只讀模式: 是
• 小地圖: 顯示
• 代碼長度: 223 字符
• 行數: 10 行

API

屬性

屬性名	說明	類型	默認值
modelValue	綁定的代碼值	string	''
language	程式語言	string	'javascript'
theme	編輯器主題	'vs' | 'vs-dark' | 'hc-black' | 'hc-light'	'vs'
width	編輯器寬度	string | number	'100%'
height	編輯器高度	string | number	'300px'
readOnly	是否只讀	boolean	false
loading	載入中文字	string	''
minimap	是否顯示小地圖	boolean	true
lineNumbers	行號顯示模式	'on' | 'off' | 'relative' | 'interval'	'on'
wordWrap	文字換行模式	'off' | 'on' | 'wordWrapColumn' | 'bounded'	'off'
fontSize	字體大小	number	14
tabSize	Tab 大小	number	2
insertSpaces	是否使用空格代替 Tab	boolean	true
automaticLayout	是否自動佈局	boolean	true
options	Monaco Editor 選項	monaco.editor.IStandaloneEditorConstructionOptions	{}

事件 Events

事件名	說明	回調參數
update:modelValue	值更新事件	(value: string)
change	內容變化事件	(value: string, event: monaco.editor.IModelContentChangedEvent)
ready	編輯器準備就緒事件	(editor: monaco.editor.IStandaloneCodeEditor)
focus	聚焦事件	(event: any)
blur	失焦事件	(event: any)
keydown	按鍵事件	(event: monaco.IKeyboardEvent)
keyup	按鍵釋放事件	(event: monaco.IKeyboardEvent)
mousedown	滑鼠按下事件	(event: monaco.editor.IEditorMouseEvent)
mouseup	滑鼠釋放事件	(event: monaco.editor.IEditorMouseEvent)
contextmenu	右鍵選單事件	(event: monaco.editor.IEditorMouseEvent)

插槽 Slots

插槽名	說明
loading	載入狀態插槽
default	預設插槽（載入狀態）

方法 Methods

可以通過 ref 獲取組件實例並調用以下方法：

方法名	說明	參數	返回值
getValue	獲取編輯器值	-	string
setValue	設置編輯器值	value: string	void
focus	聚焦編輯器	-	void
format	格式化代碼	-	void
layout	重新佈局	-	void