vue-monaco-editor编辑器的使用

页面效果：

editor.jpg

1.安装vue-monaco-editor

npm install vue-monaco-editor --save

2.在使用页面import引用进来

import MonacoEditor from 'vue-monaco-editor'

3.注册为组件

components: {
    MonacoEditor
  }

4.在template中使用

<MonacoEditor
   :code="code"
   :key="randomkey"   // 添加key是为了保证唯一值，防止第一次加载，后端请求的数据反显不到编辑器上
   :editorOptions="options"
   @mounted="onMounted"
   @codeChange="onCodeChange">    // 还可添加language属性，让编辑器识别语言，例如language="sql"
</MonacoEditor>

5.在data中定义字段属性

editor: null,
code: '',
options: {
  selectOnLineNumbers: false
 },
randomkey:1231231  

6.在methods中定义方法

onMounted(editor) {
   this.editor = editor; 
},
onCodeChange(editor) {
   console.log(this.editor.getValue());
},
// createRamdomKey随机生成值，其值类似于id。该方法最为重要，在给code赋值之后，调用这个方法
createRamdomKey() {
  return Math.floor(Math.random()*(10,1000000012313));
}，
getDetail() {
  // res为请求返回的值
  this.$nextTick(() => {
      this.code = res.sourceFormula
      this.randomkey = this.createRamdomKey()
   })
}

更多参数可参考：https://www.npmjs.com/package/vue-monaco-editor