vue-monaco

vue-monaco

Monaco Editor is the code editor that powers VS Code.

Install

yarn add vue-monaco

Usage

You need to include monaco-editor first.

<script src="/path/to/monaco-editor/min/vs/loader.js"></script>
<script>
  require.config({ 
    paths: { 
      vs: '/path/to/monaco-editor/min/vs'
    }
  })
</script>

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
• placeholder: Display a placeholder until the monaco editor is loaded. Could a string or vNode.
• require: Cutomize require. Sometimes, window.require is not the one wanted (eg. Electron). Check here https://github.com/Microsoft/monaco-editor-samples/tree/master/sample-electron

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