Monaco Editor for Vue.
npm install @lianpf/monaco-editor-vue --save
npm install monaco-editor-webpack-plugin --save
<template>
<div id="app">
<MonacoEditor
width="800"
height="500"
theme="vs-dark"
language="javascript"
:options="options"
@change="onChange"
></MonacoEditor>
</div>
</template>
<script>
import MonacoEditor from 'monaco-editor-vue';
export default {
name: "App",
components: {
MonacoEditor
},
data() {
return {
options: {
//Monaco Editor Options
}
}
},
methods: {
onChange(value) {
console.log(value);
}
}
};
</script>
添加 Monaco Webpack plugin monaco-editor-webpack-plugin
到你项目中的 webpack.config.js
:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
plugins: [
new MonacoWebpackPlugin({
// available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
languages: ['javascript']
})
]
}
如果你项目中使用的是 Vue CLI 而不是webpack, 你需要配置 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']
}
])
}
}
如果你指定 value
属性, 组件则以受控模式运行。否则,它是非受控模式。
width
:editor 的宽度, 默认为100%
height
:editor 的高度,默认为100%
.
value
:editor 中可以自动创建 model 的值(value of the auto created model in the editor)original
:editor 中可以自动创建 original model 的值(value of the auto created original model in the editor).language
:编辑器中自动创建模型的初始语言,默认为javaScript
.theme
:编辑的主题,默认为vs
.options
:参考 Monaco interface IEditorConstructionOptions.editorBeforeMount(monaco)
:在 editor 加载安装好之前调用的 function (类似于 Vue 中的beforeMount
).editorMounted(editor, monaco)
:在 editor 加载安装好后调用的 function (类似于 Vue 中的mounted
).change(newValue, event)
:当前 model 的内容发生更改时所触发的事件
Monaco only supports one theme.
<template>
<div id="app">
<MonacoEditor
:diffEditor="true"
original="..."
//...
></MonacoEditor>
</div>
</template>