vue3 monaco-editor vite3

vue中嵌入代码编辑器，实现基本的展示的返显功能

版本: monaco-editor@0.49.0 vue3 vite3

一、封装editor.vue组件

<template>
  <div ref="editorContainer" style="height: 300px; min-width: 600px"></div>
</template>

<script setup lang="ts">
import * as monaco from "monaco-editor/esm/vs/editor/editor.main.js";
import { ref, onMounted, getCurrentInstance, watchEffect } from "vue";

const props = defineProps<{
  value: any;
  language: any;
}>();
let editor = null;
const { proxy } = getCurrentInstance();
watchEffect(() => {
  if (props.value) {
    editor.setValue(props.value);
  }
});
onMounted(() => {
  editor = monaco.editor.create(proxy.$refs.editorContainer, {
    value: "",
    readOnly: false,
    language: "",
    theme: "vs-dark",
    selectOnLineNumbers: true,
    automaticLayout: true,
    renderSideBySide: false,
  });
});
const getEditorValue = () => {
  return editor.getValue();
};
//导出获取编辑器全部值的方法，在提交表单时给后端传值
defineExpose({
  getEditorValue,
});
</script>
 

二、父组件中调用

const editorRef = ref();
function confirmEdit() {
    //...
   params.command = editorRef.value.getEditorValue();
}
  <CodingEditor
        :value="form.command"
        ref="editorRef"
        language="javascript"
    />

# Import monaco-editor using Vite web workers 报错处理

github.com/vitejs/vite…