fix: 解决编辑器不能正常执行worker的问题

This commit is contained in:
奔跑的面条 2022-07-06 14:40:35 +08:00
parent 6da5c613de
commit 6a5fe679be
4 changed files with 25 additions and 26 deletions

View 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>

View File

@ -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 () => {

View File

@ -1,3 +1,4 @@
import MonacoEditor from './index.vue';
import EditorWorker from './EditorWorker.vue';
export { MonacoEditor };
export { MonacoEditor, EditorWorker };

View File

@ -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>,