vue中使用代码编辑器monaco-edito

摩纳哥编辑器

安装&引入

npm install monaco-edito
import * as monaco from "monaco-editor";

子组建

<template>
<!--  摩纳哥编辑器子组建 -->
  <div class="the-code-editor-container" ref="container"></div>
</template>

<script>
import * as monaco from "monaco-editor";
export default {
  name: "codeEditor",

  props: {
    options: {
      type: Object,
      default() {
        return {
          language: "yaml", // shell、sql、python
          readOnly: true // 不能编辑
        };
      }
    },

    value: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      monacoInstance: null,
      provider: null,
    };
  },
  
  mounted() {
    this.init();
  },
  
  beforeDestroy() {
    this.dispose();
  },

  methods: {
    dispose() {
      if (this.monacoInstance) {
        if (this.monacoInstance.getModel()) {