monaco-editor基本使用

news2025/10/31 12:45:36

前言

公司项目需要代码编辑器，多方参考之后用了monaco-editor。

一、monaco-editor是什么？

Monaco Editor 是微软开源的基于 VS Code 的代码编辑器，运行在浏览器环境中。

二、使用步骤

1.npm下载插件

//我下载的版本
npm i monaco-editor@0.28.1
npm i monaco-editor-webpack-plugin@4.2.0

2. vue.config.js配置

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
  chainWebpack: (config) => {
    config.plugin('monaco').use(new MonacoWebpackPlugin({
      languages: ['javascript', 'css', 'html', 'typescript', 'json','sql','java']
    }))
 }
}

3.封装为vue组件

<template>
  <div class="myEditor">
    <div ref="monacocontainer" class="container" :id="id"></div>
  </div>
</template>
<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
export default {
  props: {
    codes: {
      type: [String,Object],
      default: function () {
        return ''
      }
    },
//可填的几种语言需要在vue.config.js先配置
    language: {
      type: String,
      default: function () {
        return 'javascript'
      }
    },
    editorOptions: {
      type: Object,
      default: function () {
        return {
          foldingStrategy: 'indentation', // 代码可分小段折叠
          selectOnLineNumbers: true,
          roundedSelection: false,
          readOnly: false,        // 只读
          cursorStyle: 'line',        // 光标样式
          automaticLayout: false, // 自动布局
          glyphMargin: true,  // 字形边缘
          useTabStops: false,
          fontSize: 28,       // 字体大小
          tabSize: 2, // tab 缩进长度
          autoIndent: true, // 自动布局
          minimap: {
            enabled: false, // 不要小地图
          },
        }
      }
    },
    theme: {
      type: String,
      default: function () {
        return 'vs'
      }
    },
    id: {
      type: Number,
      default: function () {
        return 0
      }
    }
  },
  data() {
    return {
      // theme: 'vs',
      codesCopy: null // 内容备份
    }
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      let editorOptions=this.editorOptions
      let base= {
        value: this.codesCopy || this.codes,
        language: this.language,
        theme: this.theme,
      }
      Object.assign(editorOptions, base)

      this.monacoEditor = monaco.editor.create(document.getElementById(this.id),editorOptions)
     
      this.$emit('mounted', this.monacoEditor)
     
      this.monacoEditor.onDidChangeModelContent((event) => {
        this.codesCopy = this.monacoEditor.getValue()
        
        this.$emit('codeChange', this.monacoEditor.getValue(), event)
      })
    
    }
  }
}
</script>
<style scoped>
.container {
  min-height: 330px;
  text-align: left;
}
</style>

4.页面引入

<template>
     <MonacoEditor
          :codes="code"
          :editorOptions="Options"
          theme="vs"
          language="json"
          :key="randomkey"
          @mounted="onMounted"
          :id="randomkey"
        ></MonacoEditor>
</template>
//地址是封装为vue组件的页面地址
import MonacoEditor from "@/components/right/components/monacoEditor.vue";
export default {
  components: {
    MonacoEditor,
  },
data() {
    return {
     code:null,
     randomkey: 0,
      editor: null,
   Options: {
        selectOnLineNumbers: true,
        roundedSelection: false,
        readOnly: false,
        automaticLayout: true,
        glyphMargin: true,
        showFoldingControls: "always",
        formatOnPaste: true,
        formatOnType: true,
        folding: true,
      },
  }
},
methods: {
onMounted(val) {
      this.editor = val;
    },
}
}


//每次数据更新前，先将randomkey设置为随机数
this.randomkey = Math.floor(Math.random() * (10, 1000000012313));
//给代码编辑赋值，data为数据，如果需要是字符串则需要JSON.parse；若要设置为空则改为{}
this.code = JSON.stringify(data, null, "\t");