monaco editor vue2项目简记

最新推荐文章于 2025-06-12 16:53:55 发布

土豆逆袭la

最新推荐文章于 2025-06-12 16:53:55 发布

阅读量502

点赞数

CC 4.0 BY-SA版权

分类专栏：日常笔记 monaco editor 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/kassiaaaa/article/details/129294886

本文档记录了在Vue2项目中使用Monaco Editor的详细步骤，包括安装依赖、vue.config.js配置、组件引入及编辑器初始化，并列举了剪切、复制、粘贴等关键API的用法。

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

note: vue2项目不支持monaco editor@0.34.0最新版本，vue2项目对应我使用的版本号如下：

"monaco-editor": "^0.28.1",
 "monaco-editor-webpack-plugin": "^4.2.0",
  "vue": "^2.2.2",

1.安装依赖：

npm install monaco-editor-webpack-plugin@4.2.0 --save
 npm install monaco-editor@0.28.1 --save

2.vue.config.js配置

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
chainWebpack: config => {
    config.plugin('monaco').use(new MonacoWebpackPlugin({ languages: ['python'] })); // monaco编辑器
}

3.页面使用：
（1）引入插件

// 使用下面的方式引入
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
// 1. 引入monaco-editor中的python文件
import { language as pythonLanguage } from "monaco-editor/esm/vs/basic-languages/python/python.js";
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' // 代码高亮
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js'; // 查找控件

（2）提供容器

<template>
  <div
    ref="container"
    class="monaco-editor"
  ></div>
</template>

（3）变量定义

 // 主要配置
      defaultOpts: {
        value: "",
        language: "python", // 语言类型
        fontSize:"14",
        theme: "", // 编辑器主题：vs, hc-black, or