Skip to content

mojojoji/vue-monaco

 
 

Repository files navigation

vue-monaco

NPM version NPM downloads CircleCI donate

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

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

About

MonacoEditor component for Vue.js

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 98.9%
  • CSS 1.1%