Vue3使用Monaco Editor实现python编辑器

本文介绍了如何在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")

好了,快去试试吧。

### 实现 Vue 项目中的代码编辑器功能 #### 使用 Monaco Editor 为了在 Vue 项目中集成 Monaco Editor,可以采用如下方法: 安装依赖包 `monaco-editor` 和用于封装的库 `vue-monaco` 或者直接通过 CDN 引入 Monaco Editor。 如果选择 npm 安装方式,则执行命令来获取所需模块[^1]: ```bash npm install --save monaco-editor vue-monaco ``` 接着,在组件内部引入并配置 Monaco Editor。下面是一个简单的例子展示如何创建一个基于 Monaco编辑器实例: ```javascript import { defineComponent, onMounted } from &#39;vue&#39;; import * as monaco from &#39;monaco-editor&#39;; export default defineComponent({ name: &#39;CodeEditor&#39;, setup() { let editor; onMounted(() => { const container = document.getElementById(&#39;editor-container&#39;); editor = monaco.editor.create(container, { value: &#39;// some comment\nconsole.log("Hello world!");&#39;, language: &#39;javascript&#39; }); }); return {}; } }); ``` 同时需要确保 HTML 部分有一个对应的容器元素供编辑器渲染到页面上: ```html <template> <div id="editor-container" style="width:800px;height:600px;border:1px solid grey"></div> </template> ``` 对于样式调整和其他高级设置,请参阅官方文档以获得更详细的指导[^2]。 #### 使用 Ace Editor Ace Editor 同样支持多种编程语言,并且易于嵌入 Web 应用程序之中。要将其加入 Vue 工程里,先添加必要的 NPM 包: ```bash npm install ace-builds ``` 之后可以在单文件组件 (SFC) 中初始化 Ace 编辑器对象: ```javascript import ace from &#39;ace-builds/src-noconflict/ace&#39;; // 加载特定的语言模式和主题 import &#39;ace-builds/src-noconflict/mode-javascript&#39;; import &#39;ace-builds/src-noconflict/theme-github&#39;; export default { mounted () { this.initEditor(); }, methods: { initEditor(){ var editor = ace.edit(this.$refs.editor); editor.setTheme("ace/theme/github"); editor.session.setMode("ace/mode/javascript"); } } } ``` 模板部分则只需提供放置编辑区域的选择器即可: ```html <div ref="editor" style="height: 500px;"></div> ``` #### 使用 Vue CodeMirror Vue CodeMirror 提供了一个简洁的方式来把 CodeMirror 整合进 Vue.js 应用当中。首先应当安装相应的插件: ```bash npm i @codemirror/basic-setup @codemirror/vue@next codemirror ``` 随后按照说明完成基本设定,这里给出一段基础示例代码片段: ```javascript import { BasicSetup, EditorView } from &#39;@codemirror/basic-setup&#39;; import { OneDarkPro } from &#39;@codemirror/theme-one-dark&#39;; import { javascript } from &#39;@codemirror/lang-javascript&#39;; import { useCodemirror } from &#39;@uiw/codemirror-vue3&#39;; // 如果使用 Vue 3+ const props = defineProps([&#39;modelValue&#39;]); const emit = defineEmits([&#39;update:modelValue&#39;]); let extensions = [ BasicSetup, javascript(), EditorView.lineWrapping, EditorState.tabSize.of(2), ]; if (props.modelValue !== undefined && props.modelValue !== null){ extensions.push(EditorState.readOnly.of(true)); } useCodemirror(props.modelValue || &#39;&#39;, extensions,{ theme: OneDarkPro, onChange(value) { emit(&#39;update:modelValue&#39;, value); } }) ``` 以上三种方案都可以很好地满足不同场景下的需求,开发者可以根据个人喜好和技术栈特点做出合适的选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旭寒ls

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值