theme: nico

1.安裝

"monaco-editor": "^0.33.0",這個是package.json中的版本

npm install monaco-editor

2.在vite.config.js中配置

   // 強制預構建外掛包
   optimizeDeps: {
    include: [
      `monaco-editor/esm/vs/language/json/json.worker`,
      `monaco-editor/esm/vs/language/css/css.worker`,
      `monaco-editor/esm/vs/language/html/html.worker`,
      `monaco-editor/esm/vs/language/typescript/ts.worker`,
      `monaco-editor/esm/vs/editor/editor.worker`
    ], 
  },
 

3.在元件中使用

template中：
<div id="codeEditBox"></div>

script中：

<script lang="ts" setup>
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'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import * as monaco from 'monaco-editor';
import { nextTick,ref,onBeforeUnmount } from 'vue'
import {useRoute} from 'vue-router'
import api from '../../api/api.js'
 
import {ElMessage} from 'element-plus'
const text=ref('')
const route=useRoute()
const language=ref('go')
const msg=ref()
const loading=ref(false)
// 
// MonacoEditor start
//
 onBeforeUnmount(()=>{
   editor.dispose() 
 })
// @ts-ignore
self.MonacoEnvironment = {
  getWorker(_: string, 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 (['typescript', 'javascript'].includes(label)) {
      return new tsWorker()
    }
    return new EditorWorker()
  },
}
let editor: monaco.editor.IStandaloneCodeEditor;

const editorInit = () => {
    nextTick(()=>{
        monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
            noSemanticValidation: true,
            noSyntaxValidation: false
        });
        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
            target: monaco.languages.typescript.ScriptTarget.ES2016,
            allowNonTsExtensions: true
        });
        
        !editor ? editor = monaco.editor.create(document.getElementById('codeEditBox') as HTMLElement, {
            value:text.value, // 編輯器初始顯示文字
            language: 'go', // 語言支援自行查閱demo
            automaticLayout: true, // 自適應佈局  
            theme: 'vs-dark', // 官方自帶三種主題vs, hc-black, or vs-dark
            foldingStrategy: 'indentation',
            renderLineHighlight: 'all', // 行亮
            selectOnLineNumbers: true, // 顯示行號
            minimap:{
                enabled: false,
            },
            readOnly: false, // 只讀
            fontSize: 16, // 字型大小
            scrollBeyondLastLine: false, // 取消程式碼後面一大段空白 
            overviewRulerBorder: false, // 不要滾動條的邊框  
        }) : 
        editor.setValue("");
        // console.log(editor)
        // 監聽值的變化
        editor.onDidChangeModelContent((val:any) => {
            text.value = editor.getValue();
             
        })
    })
}
editorInit()
// @ts-ignore
//切換語言
const changeLanguage=()=>{
   monaco.editor.setModelLanguage(editor.getModel(), language.value)
        

  //  editor.updateOptions({
  //           language: "objective-c"
  //       });
}
//設定一個確認按鈕，點選時呼叫介面
const submitCode=()=>{
  loading.value=true
  //呼叫介面
  api.submitCode(text.value,route.query.identity).then(res=>{
    loading.value=false
      if(res.data.code==200){
        msg.value=res.data.data.msg
      
        if(res.data.data.status==1){
            ElMessage.success(res.data.data.msg)
        }else{
             ElMessage.warning(res.data.data.msg)
        }
       

      }else{
        ElMessage.error(res.data.msg)
      }
  })
}
/***
 * editor.setValue(newValue)

editor.getValue()

editor.onDidChangeModelContent((val)=>{ //監聽值的變化  })

editor.getAction('editor.action.formatDocument').run()    //格式化程式碼

editor.dispose()    //銷燬例項

editor.onDidChangeOptions　　//配置改變事件

editor.onDidChangeLanguage　　//語言改變事件
 */
</script>
 

附：案例地址

github:https://github.com/GetcharZp/gin-gorm-oj/blob/master/vue/src/page/question/editor.vue

gitee:https://gitee.com/getcharzp/gin-gorm-oj/blob/master/vue/src/page/question/editor.vue