|
@@ -2,6 +2,13 @@
|
|
|
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
|
|
|
import loader from "@monaco-editor/loader";
|
|
|
|
|
|
+// 添加 config 配置,必须在 loader.init() 之前
|
|
|
+loader.config({
|
|
|
+ paths: {
|
|
|
+ vs: "/monaco-editor/vs", // 对应 node_modules/monaco-editor/min/vs 被映射的URL路径
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
const props = defineProps({
|
|
|
value: String,
|
|
|
language: {
|
|
@@ -15,35 +22,18 @@ const props = defineProps({
|
|
|
});
|
|
|
|
|
|
const emit = defineEmits(["update:value"]);
|
|
|
-
|
|
|
const editorContainer = ref(null);
|
|
|
let editorInstance = null;
|
|
|
|
|
|
-// 调试:打印容器尺寸
|
|
|
-const logContainerSize = () => {
|
|
|
- if (!editorContainer.value) {
|
|
|
- // console.log('Editor container not yet mounted');
|
|
|
- return;
|
|
|
- }
|
|
|
- const rect = editorContainer.value.getBoundingClientRect();
|
|
|
- // console.log('Container size:', rect.width, 'x', rect.height);
|
|
|
-};
|
|
|
-
|
|
|
// 初始化 Monaco 编辑器
|
|
|
const initEditor = async () => {
|
|
|
const monaco = await loader.init();
|
|
|
-
|
|
|
- // 等待容器渲染完成
|
|
|
+
|
|
|
await nextTick();
|
|
|
-
|
|
|
- // 添加额外延迟确保布局完成(仅开发时需要)
|
|
|
- if (process.env.NODE_ENV === 'development') {
|
|
|
- await new Promise(resolve => setTimeout(resolve, 50));
|
|
|
- }
|
|
|
|
|
|
- // 再次检查尺寸
|
|
|
- const rect = editorContainer.value.getBoundingClientRect();
|
|
|
- // console.log('Final container size:', rect.width, 'x', rect.height);
|
|
|
+ if (process.env.NODE_ENV === "development") {
|
|
|
+ await new Promise((resolve) => setTimeout(resolve, 50));
|
|
|
+ }
|
|
|
|
|
|
editorInstance = monaco.editor.create(editorContainer.value, {
|
|
|
value: props.value || "",
|
|
@@ -53,38 +43,32 @@ const initEditor = async () => {
|
|
|
|
|
|
editorInstance.onDidChangeModelContent(() => {
|
|
|
const value = editorInstance.getValue();
|
|
|
- emit("update:value", value); // 触发v-model更新
|
|
|
+ emit("update:value", value);
|
|
|
});
|
|
|
|
|
|
- // 强制立即布局
|
|
|
editorInstance.layout();
|
|
|
};
|
|
|
|
|
|
-// 处理窗口大小变化
|
|
|
-const handleResize = () => {
|
|
|
- if (editorInstance) {
|
|
|
- // console.log('Window resized, updating editor layout');
|
|
|
- editorInstance.layout();
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
onMounted(() => {
|
|
|
- // console.log('Component mounted, initializing editor...');
|
|
|
initEditor();
|
|
|
});
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
- // console.log('Component unmounting, disposing editor...');
|
|
|
- window.removeEventListener('resize', handleResize);
|
|
|
+ window.removeEventListener("resize", handleResize);
|
|
|
editorInstance?.dispose();
|
|
|
});
|
|
|
|
|
|
+const handleResize = () => {
|
|
|
+ if (editorInstance) {
|
|
|
+ editorInstance.layout();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
// 监听语言变化
|
|
|
watch(
|
|
|
() => props.language,
|
|
|
(newLanguage) => {
|
|
|
if (editorInstance) {
|
|
|
- console.log('Language changed to:', newLanguage);
|
|
|
loader.init().then((monaco) => {
|
|
|
monaco.editor.setModelLanguage(editorInstance.getModel(), newLanguage);
|
|
|
});
|
|
@@ -92,12 +76,11 @@ watch(
|
|
|
}
|
|
|
);
|
|
|
|
|
|
-// 监听值变化
|
|
|
+// 监听 value 变化
|
|
|
watch(
|
|
|
() => props.value,
|
|
|
(newValue) => {
|
|
|
if (editorInstance && editorInstance.getValue() !== newValue) {
|
|
|
- console.log('Value updated programmatically');
|
|
|
editorInstance.setValue(newValue);
|
|
|
}
|
|
|
}
|