|
|
@@ -2,9 +2,33 @@
|
|
|
<div ref="monacoRef" :style="{ height }" class="le-monaco-editor" />
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
-// import * as monaco from 'monaco-editor'
|
|
|
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
|
|
|
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
|
|
|
+import * as monaco from 'monaco-editor'
|
|
|
+// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
|
|
|
+// import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js'
|
|
|
+import { ref, shallowRef, watch, onMounted, onBeforeUnmount } from 'vue'
|
|
|
+// 解决vite Monaco提示错误
|
|
|
+import editWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
|
|
+
|
|
|
+self.MonacoEnvironment = {
|
|
|
+ getWorkerUrl: function (moduleId, label) {
|
|
|
+ // console.error(moduleId, label, 'moduleId, label')
|
|
|
+ /*if (label === 'json') {
|
|
|
+ return './json.worker.bundle.js'
|
|
|
+ }
|
|
|
+ if (label === 'css' || label === 'scss' || label === 'less') {
|
|
|
+ return './css.worker.bundle.js'
|
|
|
+ }
|
|
|
+ if (label === 'html' || label === 'handlebars' || label === 'razor') {
|
|
|
+ return './html.worker.bundle.js'
|
|
|
+ }
|
|
|
+ if (label === 'typescript' || label === 'javascript') {
|
|
|
+ return './ts.worker.bundle.js'
|
|
|
+ }*/
|
|
|
+ // return './editor.worker.bundle.js'
|
|
|
+ // return 'editor.worker.js'
|
|
|
+ return editWorker
|
|
|
+ }
|
|
|
+}
|
|
|
defineOptions({ name: 'MonacoEditor' })
|
|
|
const props = defineProps({
|
|
|
height: {
|
|
|
@@ -39,7 +63,8 @@ onMounted(() => {
|
|
|
value: props.modelValue,
|
|
|
language: props.language,
|
|
|
theme: props.theme,
|
|
|
- automaticLayout: true
|
|
|
+ automaticLayout: true,
|
|
|
+ wordWrap: 'on'
|
|
|
})
|
|
|
editor.value = _editor
|
|
|
_editor.onDidChangeModelContent(event => {
|
lanceJiang