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

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