vue使用Monaco editor
程序员文章站
2022-04-27 08:51:42
...
1、项目中使用monaco-editor首先要安装
npm install monaco-editor -S
2、在组件中引用并使用:初始化、更改内容、销毁
<template>
<div ref="container" style="height: 360px;width: 100%;"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
data() {
return {
monacoEditor: { }
}
}
},
mounted() {
// 初始化编辑器,确保dom已经渲染,dialog中要写在opened中
this.monacoEditor = monaco.editor.create(this.$refs.container, {
value: '内容',
readOnly: true,
language: 'java',
theme: 'vs-dark'
});
},
methods: {
changeEditor() { // 更改editor内容
this.monacoEditor.setValue(result.data);
this.monacoEditor.getAction('editor.action.formatDocument')._run();
},
destroyEditor() { // 销毁编辑器
this.monacoEditor.dispose();
}
}
3、monaco-editor language可以选择