vue使用Monaco editor

最新推荐文章于 2024-09-13 09:38:33 发布

小蒜瓣

最新推荐文章于 2024-09-13 09:38:33 发布

阅读量1w

点赞数 2

分类专栏：编码

本文链接：https://blog.csdn.net/messicr7/article/details/107209686

版权

本文介绍了如何在Vue项目中集成Monaco Editor，包括安装、组件引用与初始化、内容管理和语言选择，同时提及了主题设置及其自定义方法。

摘要由CSDN通过智能技术生成

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-edit