Monaco Editor is the code editor that powers VS Code, now it's available as a Vue component <MonacoEditor> thanks to this project.
npm install vue-monacoOr
yarn add vue-monacoUse monaco-editor-webpack-plugin:
// webpack.config.js
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
plugins: [
new MonacoEditorPlugin({
// 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', 'typescript']
})
]
}Then use the component:
<template>
<MonacoEditor class="editor" v-model="code" language="javascript" />
</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="app"></div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-monaco"></script>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { vs: 'monaco-editor/min/vs' } })
new Vue({
el: '#app',
template: `
<monaco-editor
style="width:800px;height:600px;border:1px solid grey"
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.value: 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.diffEditor:booleanIndicate that this is a DiffEditor,falseby default.
- Params:
monaco:monaco module
Called before mounting the editor.
- Params:
editor:IStandaloneCodeEditorfor normal editor,IStandaloneDiffEditorfor diff editor.
Called when the editor is mounted.
Editor value is updated.
- Params:
value: New editor value.event: TheeventfromonDidChangeModelContent.
You can listen to the editor events directly like this:
<template>
<MonacoEditor v-model="code" @editorDidMount="editorDidMount" />
</template>
<script>
export default {
methods: {
editorDidMount(editor) {
// Listen to `scroll` event
editor.onDidScrollChange(e => {
console.log(e)
})
}
},
data() {
return {
code: '...'
}
}
}
</script>Refer to this page for all editor events.
getEditor(): IStandaloneCodeEditor: Return the editor instance.
Use ref to interact with the MonacoEditor component in order to access methods: <MonacoEditor ref="editor" />, then this.$refs.editor.getEditor() will be available.
Use diffEditor prop to indicate that this is a DiffEditor, use original prop to set the content for the original editor, use value prop to set the content for the modified editor.
<MonacoEditor
language="javascript"
:diffEditor="true"
:value="code"
:original="originalCode"
/>In this case, the component's getEditor() returns the IStandaloneDiffEditor instance, while you can use getModifiedEditor() to get the modified editor which is an IStandaloneCodeEditor instance.
- 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
