Vue在线代码编辑器插件 vue-monaco-editor

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

转载最新推荐文章于 2025-06-12 16:53:55 发布 · 3w 阅读

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何利用Vue-monaco-editor组件在Vue应用中集成Monaco代码编辑器。详细展示了安装步骤、配置方法及如何通过props自定义编辑器的各项属性。同时提供了示例代码，帮助开发者快速上手。

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

vue-monaco-editor

Monaco Editor Vue Component

Based off React Monaco Editor

Setup

npm install vue-monaco-editor --save

Simple Vue Use

import MonacoEditor from 'vue-monaco-editor'

// use in component

export default {

components: {

MonacoEditor

}

Component Props

Option	Type	Default	Description
language	String	`javascript`
height	Number/String	`100%`
width	Number/String	`100%`
code	String	`// code \n`	Initial code to show
theme	String	`vs-dark`	vs, hc-black, or vs-dark
highlighted	Array[Object]	`[{ number: 0, class: ''}]`	Lines to highlight with numbers and `.classes`
changeThrottle	Number(ms)	`0`	throttle `codeChange` emit
srcPath	String	`""`	see Webpack Use below
editorOptions	Object	Merged with defaults below	See Monaco Editor Options

Editor Default Options

defaults: {

selectOnLineNumbers: true,

roundedSelection: false,

readOnly: false,

cursorStyle: 'line',

automaticLayout: false,

glyphMargin: true

}

Component Events

These events are available to parent component

Event	Returns	Description
mounted	`editor`[editor instance]	Emitted when editor has mounted
codeChange	`editor`[editor instance]	Emitted when code has changed

Example

Component Implementation

<MonacoEditor

height="600"

language="typescript"

:code="code"

:editorOptions="options"

@mounted="onMounted"

@codeChange="onCodeChange"

</MonacoEditor>

Parent

module.exports = {

components: {

Monaco

data() {

return {

code: '// Type away! \n',

options: {

selectOnLineNumbers: false

}

};

methods: {

onMounted(editor) {

this.editor = editor;

onCodeChange(editor) {

console.log(this.editor.getValue());

}

};

Webpack Use

By default, monaco-editor is loaded from a cdn asyncronously using require. To use a local copy of monaco-editor with webpack, we need to expose the dependency in our build directory:

npm install copy-webpack-plugin --save-dev

Add this to your webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {

plugins: [

new CopyWebpackPlugin([

{

from: 'node_modules/monaco-editor/min/vs',

to: 'vs',

}

])

]

};

Then, specify the build directory path in the srcPath prop. See src/App.vue for an example.

Dev Use

git clone [this repo] .
npm install
npm run dev

Edit src/App.vue