Vue项目管理器中 安装及使用Monaco Editor

记录项目开发中遇到的难题。
部分代码参考自鹰子大佬的: Monaco Editor安装及使用

1.安装

(1)安装插件

搜索安装monaco插件

(2)安装依赖

一共要安装三个依赖，其中monaco-editor和monaco-editor-webpack-plugin的版本要对应，不然会报错

editor-vue版本略高于plugin版本，官网issue下有关于版本对应信息

我这里用的是monaco-editor@0.19.3和monaco-editor-webpack-plugin@1.9.1


也可以命令行安装：

npm install editor@1.0.0
npm install monaco-editor@0.19.3
npm install monaco-editor-webpack-plugin@1.9.1

2.配置vue.config.js文件

目录里面没有vue.config.js的话就在根目录新建一个

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
        new MonacoWebpackPlugin()
    ]
}

3.建立组件monaco.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: 500,
    },
  },
  data() {
    return {
      // 主要配置
      defaultOpts: {
        value: "", // 编辑器的值
        theme: "vs", // 编辑器主题：vs, hc-black, or vs-dark
        roundedSelection: false, // 右侧不显示编辑器预览框
        autoIndent: true, // 自动缩进
        automaticLayout: true,
        foldingStrategy: 'indentation', // 代码可分小段折叠
        minimap: {
          enabled: false, // 不要小地图
        },
      },
    };
  },
  watch: {
    opts: {
      handler(n) {
        this.init();
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 初始化container的内容，销毁之前生成的编辑器
      this.$refs.container.innerHTML = "";

      this.editorOptions = Object.assign(this.defaultOpts, this.opts);
      // 生成编辑器对象
      this.monacoEditor = monaco.editor.create(
        this.$refs.container,
        this.editorOptions
      );
      
      // 编辑器内容发生改变时触发
      this.monacoEditor.onDidChangeModelContent(() => {
        this.$emit("change", this.monacoEditor.getValue());
      });
    },
    // 供父组件调用手动获取值
    getVal() {
      return this.monacoEditor.getValue();
    },
  },
};
</script>

4.ToEditor.vue调用monaco.vue

<template>
  <div class="monaco-container">
    <div class="ChosseLanguage">
      语言：
      <el-select
        v-model="opts.language"
        clearable
        placeholder="请选择"
        size="mini"
        @change="changeLanguage"
      >
        <el-option
          v-for="item in sets.language"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      
    </div>
    <!--调用子组件-->
    <div class="monaco-editor">
      <monaco ref="monaco" :opts="opts" @change="changeValue"></monaco>
    </div>
    <el-button
      class="submit-button"
      type="primary"
      size="mini"
      @click="getValue"
      
      >提交代码</el-button
    >
  </div>
</template>
<script>
import monaco from "./monaco";
export default {
  name:'ToEditor',
  components: { monaco },
  data() {
    return {
      sets: {
        language: {
          c: "c",
          css: "css",
          go: "go",
          html: "html",
          java: "java",
          javascript: "javascript",
          json: "json",
          mysql: "mysql",
          php: "php",
          python: "python",
        },
        theme: {
          vs: "vs",
          "vs-dark": "vs-dark",
          "hc-black": "hc-black",
        },
      },
      opts: {
        value: "",
        readOnly: false, // 是否可编辑
        language: "java", // 语言类型
        theme: "vs", // 编辑器主题
      },
    };
  },
  methods: {
    changeLanguage(val) {
      this.opts.language = val;
      console.log(val);
    },
    changeTheme(val) {
      this.opts.theme = val;
    },
    // 手动获取值
    getValue() {
    var value = this.$refs.monaco.getVal();
    console.log(value);
    },
    // 内容改变自动获取值
    changeValue(val) {
      console.log(val);
    },
  },
};
</script>
<style lang="less" scoped>
.monaco-container {
  position: relative;
  height: 75%;
  width: 80%;
  margin-bottom: 10px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.monaco-editor {
  height: 100%;
  border: 1px solid rgb(91, 93, 93);
}
.submit-button {
  position: relative;
  right: 0;
}
.ChosseLanguage{
  margin-bottom: 10px;
}
</style>

5.在其他组件中调用ToEditor.vue

<template>
  <div class="monaco-editor">
      	<to-editor></to-editor>
  </div>
</template>
<script>
 import ToEditor from "./ToEditor";
 export default {
   name:"Programming",
   components: { ToEditor },
 };
</script>
<style lang="less" scoped>
.monaco-editor {
  width: 100%;
  height: 100%;
  margin-top: 40px;
}
</style>

官方地址

更多功能可以参考官网

文档和示例:
https://microsoft.github.io/monaco-editor/

Github：
https://github.com/microsoft/monaco-editor