monaco-editor-forvue

Monaco Editor Vue Component

Based on vue-monaco-editor

Setup

npm install monaco-editor-forvue --save

Simple Vue Use

import Monaco from 'monaco-editor-forvue';

// use in component
export default {
  components: {
    Monaco
  }
}

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 | | changeThrottle | Number(ms) | 0 | throttle codeChange emit | |srcPath| String | "" | see Webpack Use below | options | Object | Merged with defaults below | See Monaco Editor Options |

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

<Monaco
    width="600"
    height="600"
    language="javascript"
    theme="vs"
    :code="code"
    :options="options"
    :changeThrottle="500"
    @mounted="onMounted"
    @codeChange="onCodeChange"
    >
</Monaco>

export default {
  components: {
    Monaco
  },
  data() {
    return {
      code: '// Type away! \n'
    };
  },
  methods: {
    onMounted(editor) {
      this.editor = editor;
    },
    onCodeChange(editor) {
      console.log(this.editor.getValue());
    }
  }
}

set value:
this.editor.setValue(yourstring);

rerender editor:
this.editor.layout({
    width: 800,
    height: 800
});