vue2.x中monaco-editor的使用說明

npm install monaco-editor@0.30.1 --save-dev
npm install monaco-editor-webpack-plugin@6.0.0 --save-dev

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

<template>
  <div ref="editorContainer" class="editor"></div>
</template>

<script>
import * as monaco from 'monaco-editor';
export default {
  name: 'MonacoEditor',
  data() {
    return {
      code: '',
      editor: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 初始化編輯器
      this.editor = monaco.editor.create(this.$refs.editorContainer, {
        value: this.code,
        language: 'javascript',
        tabSize: 2,
        scrollBeyondLastLine: false,
        automaticLayout: true, // 自動佈局
        readOnly: false
      })
      console.log(this.editor)
      // 監聽內容變化
      this.editor.onDidChangeModelContent(() => {
      })
      // 監聽失去焦點事件
      this.editor.onDidBlurEditorText((e) => {
        console.log(e)
      });
    },
    // 獲取編輯框內容
    getCodeContext() {
      return this.editor.getValue()
    },
    // 自動格式化程式碼
    format() {
      this.editor.trigger('anything', 'editor.action.formatDocument')
      // 或者
      // this.editor.getAction(['editor.action.formatDocument']).run()
    },
    changeEditor() {
      if (this.editor === null) {
        this.init()
      }
      const oldModel = this.editor.getModel()
      const newModel = monaco.editor.createModel(
        this.code,
        'javascript'
      )
      if (oldModel) {
        oldModel.dispose()
      }
      this.editor.setModel(newModel)
    }
  }
}
</script>

<style scoped>
.editor {
  width: 100%;
  min-height: 400px;
}
</style>

<template>
  <div>
    <monaco-editor></monaco-editor>
  </div>
</template>

<script>
import MonacoEditor from '@/components/MonacoEditor'
export default {
  name: 'Test6',
  components: {
    MonacoEditor
  }
}
</script>

      <MonacoEditor
        width="100%"
        height="537"
        :key="randomkey"
        language="html"
        theme="vs-dark"
        :code="code"
      >
      </MonacoEditor>

data() {
    return {
      randomkey: 123,
    }
  }
methods: {
    // 每次重新給code賦值時，就重新呼叫一下下面這個方法
    createRandomkey(){
      this.randomkey = Math.floor(Math.random()*(10,1000000012313))
    },
}

<MonacoEditor
        width="100%"
        height="537"
        :key="randomkey"
        language="html"
        theme="vs-dark"
        :code="code"
        :editorOptions="options"
        @mounted="seeOnMounted"
>
// 在data中設定無法生效
options: {
     readOnly: true
},

seeOnMounted(editor) {
      this.seeEditor = editor
      this.seeEditor.updateOptions({
        readOnly: true, //是否唯讀
      })
    },