vue-monaco

Monaco Editor is the code editor that powers VS Code.

Install

yarn add vue-monaco

Usage

To use with webpack:

// webpack.config.js
const MonocoEditorPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  plugins: [
    new MonocoEditorPlugin()
  ]
}

Then use the component:

<template>
  <monaco-editor
    class="editor"
    v-model="code"
    language="javascript">
  </monaco-editor>
</template>

<script>
import MonacoEditor from 'vue-monaco'

export default {
  components: {
    MonacoEditor
  },

  data() {
    return {
      code: 'const noop = () => {}'
    }
  }
}
</script>

<style>
.editor {
  width: 600px;
  height: 800px;
}
</style>

Props

• code
• language
• theme
• options

Events

| Event | IStandaloneCodeEditor Event | Parameters | |--------------------|-----------------------------|---------------------------------------------| | editorMount | | IStandaloneCodeEditor | | contextMenu | onContextMenu | IEditorMouseEvent | | blur | onDidBlurEditor | | | blurText | onDidBlurEditorText | | | configuration | onDidBlurEditorText | IConfigurationChangedEvent | | position | onDidChangeCursorPosition | ICursorPositionChangedEvent | | selection | onDidChangeCursorSelection | ICursorSelectionChangedEvent | | model | onDidChangeModel | IModelChangedEvent | | change | onDidChangeModelContent | value: string, e: IModelContentChangedEvent | | modelDecorations | onDidChangeModelDecorations | IModelDecorationsChangedEvent | | modelLanguage | onDidChangeModelLanguage | IModelLanguageChangedEvent | | modelOptions | onDidChangeModelOptions | IModelOptionsChangedEvent | | afterDispose | onDidDispose | | | focus | onDidFocusEditor | | | focusText | onDidFocusEditorText | | | layout | onDidLayoutChange | EditorLayoutInfo | | scroll | onDidScrollChange | IScrollEvent | | keydown | onKeyDown | IKeyboardEvent | | keyup | onKeyUp | IKeyboardEvent | | mouseDown | onMouseDown | IEditorMouseEvent | | mouseLeave | onMouseLeave | IEditorMouseEvent | | mouseMove | onMouseMove | IEditorMouseEvent | | mouseUp | onMouseUp | IEditorMouseEvent |

Methods

• getMonaco(): IStandaloneCodeEditor: Return the editor instance.

Use ref to interact with the MonacoEditor component in order to access methods: <MonacoEditor ref="editor"></MonacoEditor>, then this.$refs.editor.getMonaco() will be available.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

vue-monaco © egoist, Released under the MIT License. Authored and maintained by egoist with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily