vue3 封装monaco-editor

Vue 3 中封装 Monaco Editor 可以让你在项目中更方便地使用这个强大的代码编辑器。Monaco Editor 是由微软开发的一个轻量级、可定制的代码编辑组件，适用于多种编程语言和文件类型。

以下是一个基本的 Vue 3 中封装 Monaco Editor 的步骤：

1. 安装依赖：

npm install monaco-editor @vueuse/core

或使用 Yarn：

yarn add monaco-editor @vueuse/core

2. 导入并创建组件：

<template>
  <div ref="monacoEditor">
    <textarea v-model="code" @input="updateEditor"></textarea>
  </div>
</template>

<script>
import { useMountedEffect } from '@vueuse/core'
import * as Monaco from 'monaco-editor'

export default {
  setup() {
    const code = ref('')
    const editor = ref(null)

    // 初始化 Monaco Editor
    useMountedEffect(() => {
      const initEditor = async () => {
        if (!editor.value) return

        const monacoEditor = await MonacoWebpackPlugin.MonacoEnvironment.createMonacoEditor(editor.value, {
          value: code.value,
          language: 'javascript', // 根据需要设置语言
          theme: 'vs-dark', // 设置主题
        })

        monacoEditor.onDidChangeModelContent(() => {
          code.value = monacoEditor.getValue()
        })
      }
      initEditor()
    }, [code])

    // 更新编辑器方法
    const updateEditor = (e) => {
      editor.value.editor.setValue(e.target.value)
    }

    return {
      code,
      editor
    }
  },
}
</script>

3. 如果你在使用 Webpack，还需要配置 MonacoWebpackPlugin：

// webpack.config.js 或 vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new MonacoWebpackPlugin({
      path: require.resolve('monaco-editor'), // monaco-editor 的路径
      loader: 'ts-loader', // 如果使用 TypeScript 编译
      languages: ['javascript', 'typescript'], // 支持的语言列表
    }),
  ],
  // ...
}