Monaco-Editor在Vue中使用(实现代码编辑与diff代码比较)--类似vscode代码编辑器

Monaco-Editor 是一个由 Microsoft 开发的 Web 代码编辑器，它是 Visual Studio Code 的浏览器版本。在 Vue 项目中集成 Monaco-Editor 可以提供代码编辑、语法高亮、智能提示等功能

效果：

1、安装使用，最好安装指定版本，我是 vue2 ，安装的版本

"monaco-editor": "^0.23.0",

"monaco-editor-webpack-plugin": "^3.1.0",

npm install monaco-editor --save-dev

npm install monaco-editor-webpack-plugin --save-dev
 

2、配置vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  transpileDependencies: true,
  // 其他配置...
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin()
  ]
  }
};

 3、VUE页面

封装了一下：

components/monacoeditor.vue

<template>
  <div
    ref="container"
    class="monaco-editor"
    :style="`height: ${height}px`"
  ></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
  name: 'AcMonaco',
  props: {
    opts: {
      type: Object,
      default () {
        return {}
      }
    },
    height: {
      type: Number,
      default: 300
    }
  },
  data () {
    return {
      // 主要配置
      defaultOpts: {
        value: '', // 编辑器的值
        theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
        roundedSelection: true