-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Description
Reproducible in vscode.dev or in VS Code Desktop?
- Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- Not reproducible in the monaco editor playground
Monaco Editor Playground Link
在vue3+vite架构中
使用"monaco-editor": "^0.52.2"
"vite-plugin-monaco-editor-esm": "^2.0.2"
在初始化editor的过程中 报错
isTrusted: true
bubbles: false
cancelBubble: false
cancelable: true
colno: 24
composed: false
currentTarget: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
defaultPrevented: true
error: null
eventPhase: 0
filename: "http://localhost:9000/enterprise/monaco-editor/editor.worker.bundle.js"
lineno: 475
message: "Uncaught TypeError: Node is not a constructor"
returnValue: false
srcElement: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
target: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
timeStamp: 20342
type: "error"
下面是核心代码
<script setup> import * as monaco from 'monaco-editor'; // eslint-disable-next-line import { ref, onMounted, onBeforeUnmount, watch, } from 'vue'; const props = defineProps({ codeObj: { type: [Object, String], default: '' } }) const editorContainer = shallowRef(null); let editorInstance = null; watch(() =>props.codeObj, (newVal, oldVal) => { console.log(newVal, 'newVal'); console.log(editorInstance, 'newVal'); editorInstance && editorInstance.setValue(JSON.stringify(newVal)); }, { immediate: true } ); let xx = ref({ xx:2345,tr:6543 }) onMounted(() => { if (editorContainer.value) { // 自定义编辑器主题 monaco.editor.defineTheme('custom-theme', { base: 'vs', // 基于深色主题扩展 inherit: true, // 继承基础主题的其他样式 rules: [], // 语法高亮规则(保持默认) colors: { 'editor.background': '#f1f3f6', // 自定义背景色(深灰色示例) // 可添加其他颜色自定义 'editor.foreground': '#354052', // 文本颜色 'editorLineNumber.foreground': '#f2dede', // 行号颜色 } }); editorInstance = monaco.editor.create(editorContainer.value, { value: '', // 初始文本内容 language: 'javascript', // 初始语言 theme: 'custom-theme', // 主题 automaticLayout: true, // 窗口resize时自适应 readOnly: true, // 是否设置为只读模式 placeholder: '请输入代码', }); editorInstance.setValue(JSON.stringify(props.codeObj)); // 监听编辑器内容变化 editorInstance.onDidChangeModelContent(() => { // 可以在这里处理编辑器内容变化,例如通知父组件 console.log('Editor content changed:', editorInstance?.getValue() || ''); }); } }); onBeforeUnmount(() => { if (editorInstance) { editorInstance.dispose(); // 组件卸载时销毁编辑器实例 } }); </script> <style scoped> /* 这里可以添加一些样式来调整编辑器的外观 */ </style>Monaco Editor Playground Code
Reproduction Steps
No response
Actual (Problematic) Behavior
No response
Expected Behavior
No response
Additional Context
No response