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

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

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

vue-monaco-editor

Monaco Editor Vue Component

Based off React Monaco Editor

experimental

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

OptionTypeDefaultDescription
languageStringjavascript 
heightNumber/String100% 
widthNumber/String100% 
codeString// code \nInitial code to show
themeStringvs-darkvs, hc-black, or vs-dark
highlightedArray[Object][{ number: 0, class: ''}]Lines to highlight with numbers and .classes
changeThrottleNumber(ms)0throttle codeChange emit
srcPathString""see Webpack Use below
editorOptionsObjectMerged with defaults belowSee 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

EventReturnsDescription
mountededitor[editor instance]Emitted when editor has mounted
codeChangeeditor[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

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值