seec-eval/src/views/exam/components/CodeEditor.vue

<template>
  <div style="height: 100%; width: 100%;"></div>
</template>

<script lang="ts">
import Vue from 'vue'
import * as Monaco from 'monaco-editor'
import { editor } from 'monaco-editor'
import ICodeEditor = editor.ICodeEditor
import ITextModel = editor.ITextModel

export default Vue.extend({
  name: 'CodeEditor',

  model: {
    event: 'change'
  },

  data() {
    return {
      editor: (null as unknown) as ICodeEditor,
      monaco: (null as unknown) as typeof Monaco
    }
  },
  props: {
    original: { default: '', type: String },
    value: {
      type: String,
      required: true
    },
    theme: {
      type: String,
      default: 'vs'
    },
    language: { default: '', type: String },
    options: {
      default: () => ({
        height: '100%'
      }),
      type: Object
    }
  },

  watch: {
    language: function(newVal) {
      if (this.editor) {
        const model = this.editor.getModel()
        this.monaco.editor.setModelLanguage(model as ITextModel, newVal)
        this.editor.setModel(model)
      }
    },

    value: function(newVal) {
      if (this.editor) {
        if (newVal !== this.editor.getValue()) {
          this.editor.setValue(newVal)
        }
      }
    }
  },

  mounted() {
    this.monaco = Monaco
    this.initMonaco()
  },

  beforeDestroy() {
    this.editor && this.editor.dispose()
  },

  methods: {
    initMonaco() {
      const options = {
        value: this.value,
        theme: this.theme,
        language: this.language,
        ...this.options
      }

      this.editor = this.monaco.editor.create(this.$el as HTMLElement, options)

      this.editor.onDidChangeModelContent((event) => {
        const value = this.editor.getValue()
        if (this.value !== value) {
          this.$emit('change', value)
        }
      })
    },
    setValue(val: string) {
      this.editor.setValue(val)
    }
  }
})
</script>

<style></style>