<divref="container" class="monaco-editor"></div>

<template><divref="container" class="monaco-editor" :style="`height: ${height}px`" ></div></template><script>import*asmonacofrom'monaco-editor'exportdefault{name: 'AcMonaco',props: {opts: {type: Object,default(){return{}}},height: {type: Number,default: 300}},data(){return{// 主要配置defaultOpts: {value: '',// 编辑器的值theme: 'vs-dark',// 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网roundedSelection: true,// 右侧不显示编辑器预览框autoIndent: true// 自动缩进},// 编辑器对象monacoEditor: {}}},watch: {opts: {handler(){this.init()},deep: true}},mounted(){this.init()},methods: {init(){// 初始化container的内容，销毁之前生成的编辑器this.$refs.container.innerHTML=''// 生成编辑器配置leteditorOptions=Object.assign(this.defaultOpts,this.opts)// 生成编辑器对象this.monacoEditor=monaco.editor.create(this.$refs.container,editorOptions)// 编辑器内容发生改变时触发this.monacoEditor.onDidChangeModelContent(()=>{this.$emit('change',this.monacoEditor.getValue())})},// 供父组件调用手动获取值getVal(){returnthis.monacoEditor.getValue()}}}</script>

<template><div><divid="app"><imgalt="Vue logo" style="width: 200px; height: 200px" src="./assets/logo.png" /><h1>Easy-CodeEditor</h1><div> 语言： <el-selectv-model="opts.language" clearableplaceholder="请选择" size="mini" @change="changeLanguage" ><el-optionv-for="item in sets.language" :key="item" :label="item" :value="item" ></el-option></el-select> 样式风格： <el-selectv-model="opts.theme" clearableplaceholder="请选择" size="mini" @change="changeTheme" ><el-optionv-for="item in sets.theme" :key="item" :label="item" :value="item" ></el-option></el-select><el-buttontype="primary" size="mini" @click="getValue" >获取内容</el-button></div></div><div><!--调用子组件--><monacoref="monaco" :opts="opts" @change="changeValue" :height="600" ></monaco></div></div></template><script>importmonacofrom'./components/monacoeditor'exportdefault{components: { monaco },data(){return{sets: {language: {'apex': 'apex','azcli': 'azcli','bat': 'bat','c': 'c','clojure': 'clojure','coffeescript': 'coffeescript','cpp': 'cpp','csharp': 'csharp','csp': 'csp','css': 'css','dockerfile': 'dockerfile','fsharp': 'fsharp','go': 'go','graphql': 'graphql','handlebars': 'handlebars','html': 'html','ini': 'ini','java': 'java','javascript': 'javascript','json': 'json','kotlin': 'kotlin','less': 'less','lua': 'lua','markdown': 'markdown','msdax': 'msdax','mysql': 'mysql','objective-c': 'objective-c','pascal': 'pascal','perl': 'perl','pgsql': 'pgsql','php': 'php','plaintext': 'plaintext','postiats': 'postiats','powerquery': 'powerquery','powershell': 'powershell','pug': 'pug','python': 'python','r': 'r','razor': 'razor','redis': 'redis','redshift': 'redshift','ruby': 'ruby','rust': 'rust','sb': 'sb','scheme': 'scheme','scss': 'scss','shell': 'shell','sol': 'sol','sql': 'sql','st': 'st','swift': 'swift','tcl': 'tcl','typescript': 'typescript','vb': 'vb','xml': 'xml','yaml': 'yaml'},theme: {'vs': 'vs','vs-dark': 'vs-dark','hc-black': 'hc-black'}},opts: {value: '',readOnly: false,// 是否可编辑language: 'javascript',// 语言类型theme: 'vs-dark'// 编辑器主题}}},methods: {changeLanguage(val){this.opts.language=val},changeTheme(val){this.opts.theme=val},// 手动获取值getValue(){this.$message.info('代码已输出至控制台');console.log('输出代码:'+this.$refs.monaco.getVal())},// 内容改变自动获取值changeValue(val){console.log(val)}}}</script><style>#app{font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color:#2c3e50; margin-top:60px} </style>