vue2.x中使用monaco-editor
安装
注意两个库的版本指定
npm install monaco-editor@0.30.1 --save-dev
npm install monaco-editor-webpack-plugin@6.0.0 --save-dev
配置
vue.config.js中配置
chainWebpack(config) {
// monaco-editor 编辑器
config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
{
// Languages are loaded on demand at runtime
languages: ['json', 'javascript', 'html', 'xml', 'go', 'typescript']
}
])
}
创建MonacoEditor公共组件
<template>
<div id="monaco-editor-box">
<div id="monaco-editor" ref="monacoEditor" />
</div>
</template>
<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main'
export default {
name: 'MonacoEditor',
components: {},
props: {
// 编辑器支持的文本格式,自行在百度上搜索
types: {
type: String,
default: 'json'
},
// 名称
name: {
type: String,
default: 'test'
},
editorOptions: {
type: Object,
default: function() {
return {
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false, // 只读
writeOnly: false,
cursorStyle: 'line', // 光标样式
automaticLayout: true, // 自动布局
glyphMargin: true, // 字形边缘
useTabStops: false,
fontSize: 32, // 字体大小
autoIndent: true // 自动布局
// quickSuggestionsDelay: 500, //代码提示延时
}
}
},
codes: {
type: String,
default: function() {
return ''
}
}
},
data() {
return {
editor: null, // 文本编辑器
isSave: true, // 文件改动状态，是否保存
codeValue: null // 保存后的文本
}
},
watch: {
codes: function(newValue) {
console.debug('Code editor: content change')
if (this.editor) {
if (newValue !== this.editor.getValue()) {
this.editor.setValue(newValue)
this.editor.trigger(this.editor.getValue(), 'editor.action.formatDocument')
}
}
}
},
mounted() {
this.initEditor()
},
methods: {
initEditor() {
const self = this
// 初始化编辑器，确保dom已经渲染
this.editor = monaco.editor.create(self.$refs.monacoEditor, {
value: self.codeValue || self.codes, // 编辑器初始显示内容
language: self.types, // 支持语言
theme: 'vs-light', // 主题
selectOnLineNumbers: true, // 显示行号
editorOptions: self.editorOptions
})
// self.$emit("onMounted", self.editor); //编辑器创建完成回调
self.editor.onDidChangeModelContent(function(event) {
// 编辑器内容changge事件
self.codesCopy = self.editor.getValue()
self.$emit('onCodeChange', self.editor.getValue(), event)
})
}
}
}
</script>
<style scoped>
#monaco-editor {
width: 100%;
height: 600px;
}
</style>
