Artikelverzeichnis
1. Grundlegende Verwendung des Monaco-Editors
Nehmen Sie als Beispiel das vue2-Projekt
Abhängigkeiten installieren
npm i monaco-editor
npm i monaco-editor-webpack-plugin
vue.config.js konfigurieren
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin()
]
}
}
Bevor Sie monaco-editor verwenden, müssen Sie einen Container vorbereiten, um die monaco-editor-Instanz bereitzustellen
<div id="monacoEditorContainer" style="height:300px;"></div>
Erstellen einer monaco-editor-Instanz
Verwenden Sie die monaco.editor.create-Methode, um eine monaco-editor-Instanz zu erstellen. Der erste Parameter der create-Methode empfängt ein dom-Element, und der zweite Parameter ist optional. Er empfängt ein IStandaloneEditorConstructionOptions-Konfigurationsobjekt. Informationen zu IStandaloneEditorConstructionOptions finden Sie
in der Monaco-Editor-API-Dokumentation
Zum Beispiel:
<script>
import * as monaco from 'monaco-editor'
export default {
data() {
return {
standaloneEditorConstructionOptions: {
value: '', // 编辑器的值
language: 'javascript', //语言
theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark
autoIndent: true, // 自动缩进
readOnly: false, // 是否只读
}
}
},
mounted() {
this.createMonacoEditor()
},
methods: {
createMonacoEditor() {
const container = document.getElementById('monacoEditorContainer')
this.monacoEditor = monaco.editor.create(container, this.standaloneEditorConstructionOptions)
}
}
}
</script>
vollständiger Code
<template>
<div>
<div id="monacoEditorContainer" style="height:300px;"></div>
</div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
data() {
return {
standaloneEditorConstructionOptions: {
value: '', // 编辑器的值
language: 'javascript', //语言
theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark
autoIndent: true, // 自动缩进
readOnly: false, // 是否只读
}
}
},
mounted() {
this.createMonacoEditor()
},
methods: {
createMonacoEditor() {
const container = document.getElementById('monacoEditorContainer')
this.monacoEditor = monaco.editor.create(container, this.standaloneEditorConstructionOptions)
}
}
}
</script>
<style scoped lang="less">
</style>
2. Der Monaco-Editor ist in eine vue-Komponente gepackt
mein-monaco-editor.vue
<!--
my-monaco-editor:
基于monaco-editor封装的vue组件，支持尺寸、配置的响应式
-->
<template>
<div :style="{height, width}" class="my-monaco-editor"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
props: {
options: {
type: Object,
default: () => {
}
},
height: {
type: String,
default: '300px'
},
width: {
type: String,
default: '100%'
},
code: {
type: String,
default: ''
}
},
data() {
return {
defaultOptions: {
value: this.code, // 编辑器的值
language: 'javascript', //语言
theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark
autoIndent: true, // 自动缩进
readOnly: false, // 是否只读
}
}
},
computed: {
standaloneEditorConstructionOptions() {
return Object.assign(this.defaultOptions, this.options)
}
},
methods: {
createMonacoEditor() {
this.monacoEditor = monaco.editor.create(this.$el, this.standaloneEditorConstructionOptions)
this.monacoEditor.onDidChangeModelContent(event => {
this.$emit('update:code', this.monacoEditor.getValue())
})
},
reSize() {
this.$nextTick(() => {
this.monacoEditor.layout()
})
}
},
mounted() {
this.createMonacoEditor()
},
watch: {
height() {
this.reSize()
},
width() {
this.reSize()
},
options: {
handler() {
this.$nextTick(() => {
this.monacoEditor.updateOptions(this.standaloneEditorConstructionOptions)
})
},
deep: true
}
}
}
</script>
<style lang="less" scoped>
</style>
Verwenden Sie my-monaco-editor
<template>
<div class="monaco-editor-view">
<!--演示尺寸响应式-->
<el-form>
<el-form-item label="height">
<el-input v-model="inputHeight" @change="val => height = val"></el-input>
</el-form-item>
<el-form-item label="width">
<el-input v-model="inputWidth" @change="val => width = val"></el-input>
</el-form-item>
</el-form>
<my-monaco-editor :code.sync="code" :height="height" :options="options" :width="width"></my-monaco-editor>
</div>
</template>
<script>
import MyMonacoEditor from '@/components/my-monaco-editor'
export default {
components: {
MyMonacoEditor
},
data() {
return {
code: 'ok',
inputHeight: '',
inputWidth: '',
height: '100px',
width: '500px',
options: {
}
}
},
created() {
this.inputHeight = this.height
this.inputWidth = this.width
setTimeout(() => {
//演示配置响应式
this.changeOptions()
}, 2000)
},
methods: {
changeOptions() {
this.$set(this.options, 'fontSize', 40)
}
}
}
</script>
<style lang="less" scoped>
</style>