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()) {
                    this.monacoInstance.getModel().dispose();
                }        
        this.monacoInstance.dispose();
        this.monacoInstance = null;
        if(this.provider){
          this.provider.dispose();
          this.provider = null
        }
      }
    },

    init() {
      this.dispose();
      // 初始化编辑器实例
      this.monacoInstance = monaco.editor.create(this.$refs["container"], {
        value: this.value,
        theme: "vs-dark",
        autoIndex: true,
        ...this.options
      });

      // 监听编辑器content变化事件
      this.monacoInstance.onDidChangeModelContent(() => {
        this.$emit("contentChange", this.monacoInstance.getValue());
      });
      
    }
  }
};
</script>

<style lang="scss" scope>
.the-code-editor-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #eaeaea;
  .monaco-editor .scroll-decoration {
    box-shadow: none;
  }
}
</style>

父组建

<template>
	<code-editor
          :options="options"
          //data可以是从后端获取后来的数据
          :value="data"
          style="height: 470px; width: 780px;"
    ></code-editor>
</template>
export default {
	data（）{
	      data : "",
		  options: {
	          language: "yaml",
    	      theme: 'vs',
      	      readOnly: true    //只读，不能编辑
      },
} 

当多处使用了该组建，会发现请求到的数据页面不会及时更新，数据显示的都为第一次请求到的数据，这时可以使用监听器。
在子组建添加：

export default {
  props: {
    
    current: Object

  },
  
 watch: {
    current () {
      this.monacoInstance.setValue(this.value)
    }
  },

父组建添加：

	<code-editor
           :current="yaml"
    ></code-editor>