当前位置：首页 > article >正文

vue3使用monaco编辑器（VSCode网页版）

article 2024/12/1 14:32:47

vue3使用monaco编辑器（VSCode网页版）

- 文章说明
- 参考文章
- 核心代码
- 效果展示
- 实践说明
- 源码下载

文章说明

一直在找网页版的编辑器，网页版的VSCode功能很强大，这个monaco就是VSCode样式的编辑器，功能很强大，可以直接使用；它的版本有变更，导致可能vue3使用会报一些小错误，我这里书写一个示例，来简单使用该组件，主要解决 babel.cosfig.js 和 vue.config.js 内缺少配置导致的报错

参考文章

Vue3 集成Monaco Editor编辑器
使用的demo代码是从这里复制过来的，不同的是，这里稍微补充了一下vue3相关的配置，不然会运行报错

Vue3中使用Monaco Editor代码编辑器
这篇文章中提到了 vue.config.js 的配置

vue报错之“ Static class blocks are not enabled. Please add `@babel/plugin-transform-class-static-block”
最后一个 babel.config.js 中需要添加的配置，在这篇文章中找到了

核心代码

依赖安装

  "dependencies": {
    "core-js": "^3.8.3",
    "monaco-editor": "^0.52.0",
    "monaco-editor-webpack-plugin": "^7.1.0",
    "vue": "^3.2.13"
  },

vue.config.js

const {defineConfig} = require('@vue/cli-service')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    publicPath: './',
    configureWebpack: {
        plugins: [
            new MonacoWebpackPlugin()
        ]
    }
})

babel.config.js

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: ["@babel/plugin-transform-private-methods", "@babel/plugin-transform-class-static-block"],
}

组件源码

<script setup>
import * as monaco from 'monaco-editor';
import {onMounted, onUnmounted, ref} from 'vue'

const editorContainer = ref();
const editor = ref();

onMounted(() => {
  if (editorContainer.value) {
    editor.value = monaco.editor.create(editorContainer.value, {
      value: "",
      language: 'javascript',
      theme: 'vs-dark',
      codeLens: true,
      folding: true,
      snippetSuggestions: 'inline',
      tabCompletion: 'on',
      foldingStrategy: 'auto',
      smoothScrolling: true,
    });

    editor.value.onDidChangeModelContent(() => {
      console.log('编辑器内容变更')
    })
  }
});

onUnmounted(() => {
  if (editor.value) {
    editor.value.dispose();
  }
});
</script>

<template>
  <div ref="editorContainer" class="container"></div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>

App.vue

<script setup>
import Editor from "@/Editor.vue";
</script>

<template>
  <div style="width: 100vw; height: 100vh">
    <Editor/>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>