效果图如下
1.安装
npm install monaco-editor --save-devnpm install monaco-editor-webpack-plugin --save-dev
2.配置
配置vue.config.js(vue-cli3.0需在根目录中新建)
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')module.exports = {configureWebpack: {plugins: [new MonacoWebpackPlugin()]}}
3.创建一个公共组件
<template><div ref="container" class="monaco-editor" :style="'height: ' + height + 'px'"></div></template><script>import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'export default {name: 'AcMonaco',props: {language: {type: String,default: 'json',},oldValue: String,value: String,height: {type: Number,default: 400,},},data() {return {monacoDiffInstance: '',// 主要配置defaultOpts: {value: '', theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网roundedSelection: false, // 右侧不显示编辑器预览框autoIndent: true, // 自动缩进readOnly: false, // 是否只读},originalModel: '',modifiedModel: '',}},mounted() {this.init()},// 监听父组件传值的变化，实时更新到编辑器中watch: {oldValue: {handler: function(val, oldVal) {this.originalModel = monaco.editor.createModel(val, this.language)this.monacoDiffInstance.setModel({original: this.originalModel,modified: this.modifiedModel,})},},value: {handler: function(val, oldVal) {this.modifiedModel = monaco.editor.createModel(val, this.language)this.monacoDiffInstance.setModel({original: this.originalModel,modified: this.modifiedModel,})this.$emit('change', this.modifiedModel.getValue())},},},methods: {init() {// 初始化编辑器实例this.monacoDiffInstance = monaco.editor.createDiffEditor(this.$refs['container'], this.defaultOpts)this.originalModel = monaco.editor.createModel(this.oldValue, this.language)this.modifiedModel = monaco.editor.createModel(this.value, this.language)this.monacoDiffInstance.setModel({original: this.originalModel,modified: this.modifiedModel,})},// 此方法获取到编辑的最新值，传给父组件getValue() {this.$emit('change', this.modifiedModel.getValue())},},}</script><style lang="less">.the-code-diff-editor-container {width: 100%;height: 100%;overflow: auto;.monaco-editor .scroll-decoration {box-shadow: none;}}</style>
4.使用组件
<monaco ref="monaco" :oldValue="oldValue" :value="value" @change="changeValue"></monaco>
// 父组件可通过refs调用子组件的方法，获取到编辑的最新值this.$refs.monaco.getValue()
5.更多使用方法
opts可配置的属性参考更多属性
