Monaco Editor is the code editor that powers VS Code.
yarn add vue-monacoUse monaco-editor-webpack-plugin:
// webpack.config.js
const MonocoEditorPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
plugins: [
new MonocoEditorPlugin({
// https://github.com/Microsoft/monaco-editor-webpack-plugin#options
// Include a subset of languages support
// Some language extensions like typescript are so huge that may impact build performance
// e.g. Build full languages support with webpack 4.0 takes over 80 seconds
// Languages are loaded on demand at runtime
languages: ['javascript', 'css', 'html']
})
]
}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><!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div
id="container"
style="width:800px;height:600px;border:1px solid grey"
></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-monaco"></script>
<script>
require.config({ paths: { vs: 'monaco-editor/min/vs' } })
new Vue({
template: `<monaco-editor v-model="code" language="javascript" :amdRequire="amdRequire" />`,
data: {
code: 'const noop = () => {}'
},
methods: {
amdRequire: require
}
})
</script>
</body>
</html>When loading monaco-editor from a CDN, you need to change require.config to look like this:
require.config({ paths: { vs: 'http://www.mycdn.com/monaco-editor/min/vs' } })
// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
// the default worker url location (used when creating WebWorkers). The problem here is that
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
// a web worker through a same-domain script
window.MonacoEnvironment = {
getWorkerUrl: function(workerId, label) {
return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
self.MonacoEnvironment = {
baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
};
importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');`)}`
}
}options: The second argument ofmonaco.editor.create.code: A shortcut to setoptions.value.theme: A shortcut to setoptions.theme.language: A shortcut to setoptions.language.amdRequire: Load monaco-editor using given amd-style require function.
| Event | IStandaloneCodeEditor Event | Parameters |
|---|---|---|
editorDidMount |
IStandaloneCodeEditor | |
contextMenu |
onContextMenu | IEditorMouseEvent |
blur |
onDidBlurEditorWidget | |
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 |
onDidFocusEditorWidget | |
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 |
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.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
vue-monaco © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
Website · GitHub @egoist · Twitter @_egoistlily