Single line mode monaco editor for Vue.
# npm
npm install vue-monaco-singleline
# or yarn
yarn add vue-monaco-singleline
<template>
<div id="app">
<monaco-singleline v-model="value" :options="options" />
</div>
</template>
<script>
import MonacoSingleline from 'vue-monaco-singleline'
export default {
name: 'App',
components: {
MonacoSingleline,
},
data() {
return {
value: 'abc 123',
options: {
// Monaco Editor Options
// all options: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
},
}
},
methods: {
onChange(value) {
console.log(value)
},
},
}
</script>
First of all, install npm package if want normal language highlight:
# npm
npm install -D monaco-editor-webpack-plugin@1.9.1
# or yarn
yarn add -D monaco-editor-webpack-plugin@1.9.1
Then:
If using [Vue CLI], can add to vue.config.js
:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
chainWebpack: config => {
config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
{
// Languages are loaded on demand at runtime
languages: ['json', 'javascript', 'html', 'xml'],
},
])
},
}
If also want Javascript autocompletion, add typescript
to languages
, because typescript
is the instantiator of javascript
:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
chainWebpack: config => {
config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
{
// Languages are loaded on demand at runtime
languages: ['json', 'typescript', 'javascript', 'html', 'xml'],
},
])
},
}
If using with Webpack only, see here.
Support full props of monaco-editor-vue.
value
: editor content- default: ''
v-model
: bind editor content (should not usevalue
at this time)placeholder
: placeholderwidth
: width of monaco editor (not this component)- Type:
Number
(px) orString
(same as csswidth
) - default:
100%
- should not use this prop in most case, should set style or class to this component
<monaco-singleline>
- Type:
height
: height of monaco editor (not this component)- Type:
Number
(px) orString
(same as csswidth
) - default:
21
(px)
- Type:
diffEditor
: monaco editor diff mode- Type: 'Boolean'
- default:
false
- example: TODO: codesandbox
original
original conent of editor, only works whendiffEditor
istrue
- in contrast,
value
orv-model
is the modified content
- in contrast,
language
the initial language of the auto created model in the editor. Defaults tojavascript
.- default: 'javascript'
- notice: no any highlight or autocompletion, if not adding
MonacoWebpackPlugin
tovue.config.js
theme
the theme of the editor. Defaults tovs
.- default:
vs
- all out-of-the-box themes:
vs
,vs-dark
,hc-black
, see here
- default:
options
refer to Monaco interface IEditorConstructionOptions.- default: see
DefaultOptions
inside source file monaco-singleline.vue
- default: see
editorBeforeMount(monaco)
The function called before the editor mounted (similar tobeforeMount
of Vue).editorBeforeMount
is Vueprops
notevent
, should be used like:editorBeforeMount
not@editorBeforeMount
editorMounted(editor, monaco)
The function called when the editor has been mounted (similar tomounted
of Vue).editorMounted
is Vueprops
notevent
, should use like:editorMounted
See DefaultOptions
inside source file monaco-singleline.vue.
change(newValue, event)
an event emitted when the content of the current model has changed.- this event will not emit before value change, if want to, should make monaco editor instance to listen onKeyUp event or so. seet this demo
More events should be found on monaco editor events, and be set on editorMounted
.
focus
- example:
this.$refs.myEditor.focus()
, orthis.editor.focus()
(on monaco instance)
- example:
More methods should be found on monaco editor methods, and be used on monaco editor instance(not this component's ref).
When set option automaticLayout: true
(already default), Monaco has a built-in auto resize to parent container functionality.
It is highly recommended that change this component height and width by CSS on this component.
It is highly recommended that custom this component by override CSS style inside.
- wrapper class:
monaco-singleline
- controls padding to border e.t.c
- placeholder class:
placeholder
If want to change font size, you should change:
- change monaco editor options
fontSize
- and, change the
height
prop to a suitable value
You may need some art to fine tuning the best you like.
Q: Why not auto ?
A: monaco editor will fit to parent element size, not parent fit to monaco editor.
<monaco-singleline readOnly />
Will:
- disable editing
- hide edit cursor
npm:
# install dependencies
npm install
# run local example app
npm run serve
# compiles and minifies for production
npm run build
yarn:
# install dependencies
yarn
# run local example app
yarn serve
# compiles and minifies for production
yarn build