MonacoEditor component for Vue.js
Switch branches/tags
Nothing to show
Clone or download
Latest commit 8573b80 Nov 9, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example add esm support Aug 2, 2018
src fix lint Aug 2, 2018
.editorconfig init Aug 3, 2017
.gitattributes init Aug 3, 2017
.gitignore init Aug 3, 2017
LICENSE init Aug 3, 2017
README.md Typo, fix #15 Nov 9, 2018
circle.yml init Aug 3, 2017
package.json Release v0.2.0 Aug 2, 2018
poi.config.js fix lint Aug 2, 2018
yarn.lock add esm support Aug 2, 2018

README.md

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
editorDidMount 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