Vue3使用Monaco Editor实现python编辑器

旭寒ls

已于 2024-03-14 16:11:25 修改

阅读量2.7k

点赞数 11

CC 4.0 BY-SA版权

文章标签：编辑器开发语言 vue.js

于 2024-02-27 15:11:11 首次发布

本文链接：https://blog.youkuaiyun.com/qq_53485256/article/details/136322748

本文介绍了如何在Vue项目中安装和配置MonacoEditor，包括添加MonacoWebpackPlugin到Vite配置，创建并初始化编辑器实例，以及获取和设置编辑器内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Monaco Editor？

微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。

开始使用

首先，我们需要安装monaco-editor和monaco-editor-webpack-plugin

npm install monaco-editor@0.30.0 -S
 
npm install monaco-editor-webpack-plugin@6.0.0 -D

然后进入vite.config.js文件，以下为代码片段

增加const MonacoWebpackPlugin = require(‘monaco-editor-webpack-plugin’);
和
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({ languages: [‘python’,‘javascript’, ‘typescript’, ‘html’, ‘css’, ‘json’] })
]
},

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const MonacoPlugin = require('monaco-editor-webpack-plugin');
 
export default defineConfig({
  plugins: [vue(),new MonacoPlugin({ languages: ['python','javascript', 'typescript', 'html', 'css', 'json'] })],
  )}

创建页面

接下来就可以直接开始使用了
记得导入才能使用

import * as monaco from 'monaco-editor';

<template>
        <div class="Content">
            <div ref="monacoEditorContainer" style="width:100%;height: 100%;"></div>
    </div>
</template>
<script lang="ts" setup>
import * as monaco from 'monaco-editor';
const monacoEditorContainer = ref(<any>null);
let editorInstance = ref(<any>null)

// 编辑器初始化
const editor = () => {
    editorInstance = monaco.editor.create(monacoEditorContainer.value, {
        theme: "vs-dark",
        value: '',
        language: "python",
        folding: true,
        foldingHighlight: true,
        foldingStrategy: "indentation",
        showFoldingControls: "always",
        disableLayerHinting: true,
        emptySelectionClipboard: false,
        selectionClipboard: false,
        automaticLayout: true,
        codeLens: false,
        scrollBeyondLastLine: false,
        colorDecorators: true,
        accessibilitySupport: "off",
        lineNumbers: "on",
        lineNumbersMinChars: 5,
        // enableSplitViewResizing: false,
        readOnly: false,
    });
}

// 获取编辑器内输入的内容
const getEditorContent=()=>{
    if (editorInstance) {
        const content = editorInstance.getValue();
        return content
    }
}

onMounted(() => {
    editor()
});
<script/>

进入页面，使用editor函数初始化编辑器，调用getEditorContent函数可以获取当前编辑器的内容，使用setValue函数可以给编辑器赋值

//给编辑器赋值
editorInstance.setValue("hello,world")

好了，快去试试吧。