vue-monaco-d0x
Monaco Editor is the code editor that powers VS Code, now it's available as a Vue component <MonacoEditor>
thanks to this project. Note: This is a fork of vue-monaco.
Install
npm install vue-monaco-d0x
Or
yarn add vue-monaco-d0x
Usage
Use ESM version with webpack
Use monaco-editor-webpack-plugin:
// webpack.config.jsconst MonacoEditorPlugin = moduleexports = plugins: // 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-d0x' export default { components: { MonacoEditor }, data() { return { code: 'const noop = () => {}' } }}</script> <style>.editor { width: 600px; height: 800px;}</style>
Use AMD version
When loading monaco-editor from a CDN, you need to change require.config
to look like this:
require // 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 scriptwindowMonacoEnvironment = { return `data:text/javascript;charset=utf-8,` }
Props
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
:boolean
Indicate that this is a DiffEditor,false
by default.
Component Events
editorWillMount
- Params:
monaco
:monaco module
Called before mounting the editor.
editorDidMount
- Params:
editor
:IStandaloneCodeEditor
for normal editor,IStandaloneDiffEditor
for diff editor.
Called when the editor is mounted.
change
Editor value is updated.
- Params:
value
: New editor value.event
: Theevent
fromonDidChangeModelContent
.
Editor Events
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.
Methods
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 the DiffEditor
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.
Contributing
- 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 author
vue-monaco © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
Website · GitHub @egoist · Twitter @_egoistlily