1.什么是Monaco
Monaco编辑器是为VS代码提供⽀持的代码编辑器
2.Monaco Editor安装及使⽤
2.1安装
npm install monaco-editor --save-dev
npm install monaco-editor-webpack-plugin --save-dev
2.2配置fig.js
const MonacoWebpackPlugin =require('monaco-editor-webpack-plugin')
configureWebpack:{
plugins:[
new MonacoWebpackPlugin()
]
}
}
2.3 开始使⽤
2.3.1.vue⽂件中导⼊monaco
import*as monaco from'monaco-editor'
2.3.2.创建代码编辑区域
<div ref="container"class="monaco-editor"></div>
2.3.3.初始化container
2.3.3.1 准备monaco基础配置
data(){
return{
// 主要配置
defaultOpts:{
// 编辑器的值
value:'',
// 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官⽹
theme:'vs-dark',
// 右侧不显⽰编辑器预览框
roundedSelection:true,
/
/ ⾃动缩进
autoIndent:true,
// 是否只读
readOnly:false,
// 语⾔类型java,c,php更多选择详见官⽹
language:'javascript',
}
// 编辑器对象
monacoEditor:{}
}
},
2.3.3.2 初始化monaco编辑器
methods:{
init(){
// 初始化container的内容，销毁之前⽣成的编辑器
this.$ainer.innerHTML =''
// ⽣成编辑器配置
let editorOptions = Object.assign(this.defaultOpts,this.opts)
// ⽣成编辑器对象
this.$emit('change',Value())
})
},
// ⼿动编辑器中的内容
getValue(){
this.$message.info(this.$Val())
},
}
整体源码:
图片编辑器app1. monacoeditor.vue
<template>
<div
ref="container"
class="monaco-editor"
:
></div>
</template>
<script>
import*as monaco from'monaco-editor'
export default{
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.$ainer.innerHTML =''
// ⽣成编辑器配置
let editorOptions = Object.assign(this.defaultOpts,this.opts)
// ⽣成编辑器对象
this.$emit('change',Value())
})
},
// 供⽗组件调⽤⼿动获取值
getVal(){
Value()
}
}
}
</script>
2. App.vue
<template>
<div>
<div id="app">
<img
<img
alt="Vue logo"
src="./assets/logo.png"
/>
<h1>Easy-CodeEditor</h1>
<div>
语⾔：
<el-select
v-model="opts.language"
clearable
placeholder="请选择"
size="mini"
@change="changeLanguage"
>
<el-option
v-for="item in sets.language"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
样式风格：
<el-select
v-model="opts.theme"
clearable
placeholder="请选择"
size="mini"
@change="changeTheme"
>
<el-option
v-for="item in sets.theme"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
<el-button type="primary"size="mini"@click="getValue"
>获取内容</el-button
>
</div>
</div>
<div>
<!--调⽤⼦组件-->
<monaco
ref="monaco"
:opts="opts"
@change="changeValue"
:height="600"
></monaco>
</div>
</div>
</template>
<script>
import monaco from'./components/monacoeditor'
export default{
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',
'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.$Val()) },
// 内容改变⾃动获取值
changeValue(val){
console.log(val)
}
}
}
</script>
发布评论