refactor(工具箱): 优化逻辑,提取 MonacoEnvironment 配置
This commit is contained in:
21
src/assets/js/monaco-editor.js
Normal file
21
src/assets/js/monaco-editor.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
||||
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
|
||||
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
|
||||
|
||||
/** 初始化 MonacoEnvironment */
|
||||
export function initMonacoEnvironment() {
|
||||
if (!self.MonacoEnvironment) {
|
||||
// 配置编辑器环境(Service Worker 等)
|
||||
self.MonacoEnvironment = {
|
||||
getWorker(workerId, label) {
|
||||
if (label === 'javascript' || label === 'typescript') {
|
||||
return new tsWorker();
|
||||
} else if (label === 'json') {
|
||||
return new jsonWorker();
|
||||
} else {
|
||||
return new editorWorker();
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -16,24 +16,12 @@ import {
|
||||
onBeforeUnmount, onMounted,
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
initMonacoEnvironment,
|
||||
} from '@/assets/js/monaco-editor';
|
||||
|
||||
import * as monaco from 'monaco-editor';
|
||||
|
||||
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
||||
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
|
||||
|
||||
// 配置编辑器环境(Service Worker 等)
|
||||
if (!self.MonacoEnvironment) {
|
||||
self.MonacoEnvironment = {
|
||||
getWorker(workerId, label) {
|
||||
if (label === 'json') {
|
||||
return new jsonWorker();
|
||||
} else {
|
||||
return new editorWorker();
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/** 模块名称 */
|
||||
const PREFIX = '[JsonEditor]';
|
||||
|
||||
@@ -126,6 +114,7 @@ function resetEditor() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initMonacoEnvironment();
|
||||
initEditor();
|
||||
window.addEventListener('resize', handleWindowResize);
|
||||
});
|
||||
|
||||
@@ -47,21 +47,15 @@ import {
|
||||
useFileDialog,
|
||||
} from '@vueuse/core';
|
||||
|
||||
import {
|
||||
initMonacoEnvironment,
|
||||
} from '@/assets/js/monaco-editor';
|
||||
|
||||
import {
|
||||
$dialog, $message,
|
||||
} from '@/assets/js/naive-ui';
|
||||
|
||||
import * as monaco from 'monaco-editor';
|
||||
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
||||
|
||||
// 配置编辑器环境(Service Worker 等)
|
||||
if (!self.MonacoEnvironment) {
|
||||
self.MonacoEnvironment = {
|
||||
getWorker() {
|
||||
return new editorWorker();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/** 模块名称 */
|
||||
const PREFIX = '[TextEditor]';
|
||||
@@ -220,6 +214,7 @@ fileOnChange((files) => {
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
initMonacoEnvironment();
|
||||
initEditor();
|
||||
window.addEventListener('resize', handleWindowResize);
|
||||
});
|
||||
|
||||
@@ -49,26 +49,15 @@ import {
|
||||
onBeforeUnmount, onMounted,
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
initMonacoEnvironment,
|
||||
} from '@/assets/js/monaco-editor';
|
||||
|
||||
import {
|
||||
$dialog, $message,
|
||||
} from '@/assets/js/naive-ui';
|
||||
|
||||
import * as monaco from 'monaco-editor';
|
||||
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
||||
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
|
||||
|
||||
// 配置编辑器环境(Service Worker 等)
|
||||
if (!self.MonacoEnvironment) {
|
||||
self.MonacoEnvironment = {
|
||||
getWorker(workerId, label) {
|
||||
if (label === 'javascript' || label === 'typescript') {
|
||||
return new tsWorker();
|
||||
} else {
|
||||
return new editorWorker();
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/** 模块名称 */
|
||||
const PREFIX = '[RunJavaScript]';
|
||||
@@ -259,6 +248,7 @@ function updateEditorContent(text = '') {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initMonacoEnvironment();
|
||||
initEditor();
|
||||
window.addEventListener('resize', handleWindowResize);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user