当前 vue2
安装
yarn add monaco-editor
yarn add monaco-editor-webpack-plugin --dev
注意 vue/cli 4 要安装 “monaco-editor-webpack-plugin”: “6.0.0”, “monaco-editor”: “0.30.1”
配置vue.config.js
configureWebpack{
//.......
plugins: [
new MonacoWebpackPlugin({
// available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
languages: ['javascript', 'css', 'html', 'typescript', 'json']
})
]
}
组件
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
mounted() {
const editor = monaco.editor.createDiffEditor(document.getElementById('container'))
editor.setModel({
original: monaco.editor.createModel('a'),
modified: monaco.editor.createModel('b'),
})
},
}
</script>
<style lang="scss" scoped>
#container {
height: 200px;
width: 100%;
box-sizing: border-box;
border: 1px solid #cccc;
}
.actions {
height: 2em;
display: flex;
align-items: center;
border-top: 1px solid #aaa;
padding: 0.2em;
box-sizing: border-box;
}
label {
padding-right: 0.3em;
}
</style>