npm install monaco-editor@0.26.0
npm install monaco-editor-webpack-plugin@4.0.0 //这个必须安装,不然起不来
vue使用monaco-editor的demo
test.vue
<template>
<div id="container" style="height: 1000px"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
data() {
return {
editor: null// 文本编辑器
}
},
mounted() {
this.initEditor()
},
methods: {
initEditor() {
// 初始化编辑器,确保dom已经渲染
this.editor = monaco.editor.create(document.getElementById('container'), {
// 编辑器初始显示文字
value: '',
// 语言支持自行查阅demo
language: 'python',
// 自动布局
automaticLayout: true,
// 方自带三种主题vs, hc-black, or vs-dark
theme: 'vs-dark'
}
)
},
getValue() {
this.editor.getValue() // 获取编辑器中的文本
}
}
}
</script>