欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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可以选择

vue使用Monaco editor

相关标签: 编码