monaco-editor-forvue v1.0.3

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

Component Events

These events are available to parent component

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
});