页面效果：
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()
})
}
