一、概念
二、使用步骤
- 找到
webpack
的配置文件(别弄到babel
的配置文件里了,启动会造成babel的报错),我们这的webpack
是分的多
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
title: 'Message Bridge'
}),
new MonacoWebpackPlugin()
]

组件

<template>
<div id="container" ></div>
</template>
<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main'
export default {
props: {
sql: {
type: String,
default () {
return ''
}
}
},
data() {
return {
editor: null,
mysql: ''
}
},
watch: {
sql(val) {
console.log('sql');
this.setValue(val)
},
mysql(val) {
console.log('my', val);
this.handleChange()
}
},
mounted() {
this.initEditor();
},
methods: {
initEditor() {
this.editor = monaco.editor.create(document.getElementById('container'), {
value: '',
language: 'sql',
automaticLayout: true,
theme: 'vs-dark'
});
this.setValue(this.sql)
this.editor.onDidChangeModelContent((event) => {
const newValue = this.getValue();
this.$emit('changeSql', newValue)
})
},
getValue() {
return this.editor.getValue();
},
setValue(sql) {
this.editor.setValue(sql);
}
}
}
</script>
//div无法直接高度为100%,得让所有父级设置高度
<style lang="scss" scoped>
#container {
height: 97%;
}
</style>