fix: 解决编辑器不能正常执行worker的问题
This commit is contained in:
parent
6da5c613de
commit
6a5fe679be
20
src/components/Pages/MonacoEditor/EditorWorker.vue
Normal file
20
src/components/Pages/MonacoEditor/EditorWorker.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template></template>
|
||||
|
||||
<script setup>
|
||||
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'
|
||||
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
|
||||
|
||||
self.MonacoEnvironment = {
|
||||
getWorker(workerId, label) {
|
||||
if (label === 'json') {
|
||||
return new jsonWorker()
|
||||
}
|
||||
if (label === 'typescript' || label === 'javascript') {
|
||||
return new tsWorker()
|
||||
}
|
||||
return new editorWorker()
|
||||
}
|
||||
}
|
||||
</script>
|
@ -1,34 +1,10 @@
|
||||
import { ref, onBeforeUnmount, nextTick } from 'vue'
|
||||
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
|
||||
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
||||
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
|
||||
// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
|
||||
// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
|
||||
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
|
||||
|
||||
export const useMonacoEditor = (language = 'javascript') => {
|
||||
let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null
|
||||
let initReadOnly = false
|
||||
const el = ref<HTMLElement | null>(null)
|
||||
|
||||
// @ts-ignore
|
||||
self.MonacoEnvironment = {
|
||||
getWorker(_: any, label: string) {
|
||||
if (label === 'json') {
|
||||
return new jsonWorker()
|
||||
}
|
||||
// if (label === 'css' || label === 'scss' || label === 'less') {
|
||||
// return new cssWorker()
|
||||
// }
|
||||
// if (label === 'html' || label === 'handlebars' || label === 'razor') {
|
||||
// return new htmlWorker()
|
||||
// }
|
||||
if (label === 'typescript' || label === 'javascript') {
|
||||
return new tsWorker()
|
||||
}
|
||||
return new editorWorker()
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化
|
||||
const onFormatDoc = async () => {
|
||||
|
@ -1,3 +1,4 @@
|
||||
import MonacoEditor from './index.vue';
|
||||
import EditorWorker from './EditorWorker.vue';
|
||||
|
||||
export { MonacoEditor };
|
||||
export { MonacoEditor, EditorWorker };
|
||||
|
@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<div ref="el" class="editor-area" :style="{ width, height }"></div>
|
||||
<EditorWorker></EditorWorker>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, watch, PropType } from 'vue'
|
||||
import { useMonacoEditor } from './index.hook'
|
||||
import { EditorWorker } from './index'
|
||||
|
||||
const props = defineProps({
|
||||
width: {
|
||||
@ -17,7 +19,7 @@ const props = defineProps({
|
||||
},
|
||||
language: {
|
||||
type: String as PropType<string>,
|
||||
default: 'javascript'
|
||||
default: 'typescript'
|
||||
},
|
||||
preComment: {
|
||||
type: String as PropType<string>,
|
||||
|
Loading…
x
Reference in New Issue
Block a user