vue中使用monaco-editor实现代码编辑器

我们这里是以vue3为例，实现效果如下所示：

1、安装

npm install monaco-editor --save

yarn add monaco-editor --save

2、如何使用

我这里是将其封装成了一个组件来使用的，代码如下

<div ref="codeEditBox" class="code-edit-box" style="min-width: 500px; width: 100%; height:500px;"></div>

// 引入
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 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'

// 代码编辑器 form 的 dom
const scriptFormRef = ref()

onMounted(() => {
  nextTick(() => {
     initEditor()
   })
})


/**
 * 初始化
 */
const initEditor = () => {
  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 editor = monaco.editor.create(codeEditBox.value, {
    value: '', // 默认显示内容
    theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
    language: 'javascript',
  })
  editor.onDidChangeModelContent((val: any) => {
     console.log(editor.getValue()) // 实时获取输入的内容
  })
}

下面是我封装的完整代码，是结合el-dialog组件来实现的

<template>
  <el-dialog
    :model-value="scriptVisible"
    title="脚本配置"
    draggable
    class="public-dialog form-dialog"
    :close-on-click-modal="true"
    width="70%"
    append-to-body
    destroy-on-close
    @close="handleClose"
  >
    <el-form
      ref="scriptFormRef"
      :model="scriptForm"
      inline
      class="list-search-el-form"
      label-width="auto"
      :rules="rules"
    >
      <el-row>
        <el-col>
          <el-form-item label="脚本配置" prop="scriptType">
            <el-select v-model="scriptForm.scriptType">
              <el-option label="javaScript" value='javaScript' />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="脚本内容" prop="script" class='w100'>
            <div ref="codeEditBox" class="code-edit-box" style="min-width: 500px; width: 100%; height:500px;"></div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button
        type='primary'
        @click='handleSave(scriptFormRef)'
      >保存</el-button>
      <el-button
        @click='handleClose'
      >取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang='ts' 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 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 type { FormInstance, FormRules } from 'element-plus'
const emit = defineEmits(['closeScriptModel','handleSaveScript'])
const props = defineProps({
  scriptVisible: { // 弹窗 开启 | 关闭
    type: Boolean,
    default: () => {
      return false
    },
  },
  editScriptType: { // 编辑类型
    type: String,
    default: () => {
      return ''
    },
  },
  checkedScriptItem: { // 当前编辑项
    type: Object,
    default: () => {
      return {}
    },
  },
  checkedScriptType: { // 编辑类型
    type: String,
    default: () => {
      return ''
    },
  },
})
// 代码编辑器 form 的 dom
const scriptFormRef = ref()
// 代码编辑器form
const scriptForm = ref({})
// 脚本id
const scriptId = ref(null)
// 代码编辑器dom
const codeEditBox = ref()
// 校验规则
const rules = ref<FormRules<FormRules>>({
  scriptType: [
    {
      required: true,
      message: '请选择脚本配置类型',
      trigger: 'change',
    },
  ],
  script: [
    {
      required: true,
      message: '请填写脚本配置内容',
      trigger: 'change',
    },
  ],
})
onMounted(() => {
  nextTick(() => {
    initEditor()
   })
})

/**
 * 初始化
 */
const initEditor = () => {
  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 editor = monaco.editor.create(codeEditBox.value, {
    value: scriptForm.value.script,
    theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
    language: 'javascript',
  })
  editor.onDidChangeModelContent((val: any) => {
    scriptForm.value.script = editor.getValue()
  })
}


/**
 * 确定保存脚本
 */
const handleSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit')
   
    } else {
      console.log('error submit!', fields)
    }
  })
}
/**
 * 关闭脚本编辑
 */
const handleClose = () => {
  
}
</script>

<style scoped>

</style>

这样就可以实现一个简单的代码编辑器功能了，有问题可以随时私信！