这篇文章主要讲解了“Vue2怎么安装使用MonacoEditor”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue2怎么安装使用MonacoEditor”吧！
1.安装MonacoEditor
cnpm install -S editor@1.0.0 cnpm install -S monaco-editor@0.19.3 cnpm install -S monaco-editor-webpack-plugin@1.9.1
2.配置vue.config.js文件
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin()
]
}3.建立组件monaco.vue
<template>
<div>
<div class="code-container" ref="container"></div>
</div>
</template>
<script>
import './icon/iconfont.css'
import * as monaco from 'monaco-editor'
import vCompletion from '@/utils/sql.js'//语法提示文件
export default {
name: 'codeEditor',
props: {
opts: {
type: Object,
default() {
return {
language: 'java', // shell、sql、python
readOnly: false, // 不能编辑
}
},
},
value:{
type:String,
default:''
}
},
watch: {
value: {
handler(n) {
if(this.showInit){//初次传值初始化一次
this.init()
this.showInit = false
}
this.monacoInstance.setValue(n)//剩余全部更新内容
},
deep: true,
},
},
data() {
return {
monacoInstance: null,
provider: null,
hints: [],
color: null,
showInit:true
}
},
created() {
this.init()
},
mounted() {
this.init()
},
beforeDestroy() {
this.dispose()
},
methods: {
cloneDeep(suggestions) {
return JSON.parse(JSON.stringify(suggestions))
},
dispose() {
if (this.monacoInstance) {
if (this.monacoInstance.getModel()) {
this.monacoInstance.getModel().dispose()
}
this.monacoInstance.dispose()
this.monacoInstance = null
if (this.provider) {
this.provider.dispose()
this.color.dispose()
this.provider = null
}
}
},
init() {
let that = this
this.dispose()
this.provider = monaco.languages.registerCompletionItemProvider('sql', {
provideCompletionItems(model, position) {
return {
suggestions: that.cloneDeep(vCompletion),//自定义语法提示，代码补全
}
},
triggerCharacters: ['.'],//输入点可触发代码提示
})
//自定义语法高亮
this.color = monaco.languages.setMonarchTokensProvider('sql', {
ignoreCase: true,
tokenizer: {//需要什么颜色，就在里面用正则匹配
root: [
[
/currentUser|#@|RsOk|#string|#switch|#case|selectSql|uuid|addOrderBy|addConditionRequired|countSql|addGroupBy|currentDateTime|addFieldExist|formData|simplePage|RsJson|[@]|RsJsonData|Local|select|#set|#include|#render|#end|#for|#if|#else|#elseif|from|where|addField|addConditionExist|table|SqlUtil|GROUP_CONCAT|BY|AND|ADD|Data|page|IF|as|SUM|MAX|min|AVG|COUNT|ROUND|LEFT|JOIN/,
{ token: 'keyword' },
], //蓝色
[
/[+]|[-]|[*]|[/]|[%]|[>]|[<]|[=]|[!]|[:]|[&&]|[||]/,
{ token: 'string' },
], //红色
[/'.*?'|".*?"/, { token: 'string.escape' }], //橙色
[/#--.*?--#/, { token: 'comment' }], //绿色
[/null/, { token: 'regexp' }], //粉色
[/[{]|[}]/, { token: 'type' }], //青色
// [/[u4e00-u9fa5]/, { token: 'predefined' }],//亮粉色
// [/''/, { token: 'invalid' }],//红色
// [/[u4e00-u9fa5]/, { token: 'number.binary' }],//浅绿
[/(?!.*[a-zA-Z])[0-9]/, { token: 'number.hex' }], //浅绿
[/[(]|[)]/, { token: 'number.octal' }], //浅绿
// [/[u4e00-u9fa5]/, { token: 'number.float' }],//浅绿
],
},
})
// 初始化编辑器实例
this.monacoInstance = monaco.editor.create(this.$refs['container'], {
value: this.value,
theme: 'vs-dark',
autoIndex: true,
...this.opts,
})
// 监听编辑器content变化事件
this.monacoInstance.onDidChangeModelContent(() => {
this.$emit('contentChange', this.monacoInstance.getValue())
})
},
},
}
</script>
<style lang="scss" scope>
.code-container {
width: 100%;
height: 500px;
overflow: hidden;
border: 1px solid #eaeaea;
.monaco-editor .scroll-decoration {
box-shadow: none;
}
}
</style>4.建立语法提示文件sql.js
export default [
/** * 内置函数 */
{
label: 'if',//触发提示的文本
kind: monaco.languages.CompletionItemKind.Function,
insertText: `
#if()
#end`,//补全的文本
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
detail: '流程控制'
}, {
label: 'if/else',
kind: monaco.languages.CompletionItemKind.Function,
insertText: '
#if()
#else
#end',
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
detail: '流程控制'
}
]5.父组件引入monaco.vue
<template>
<div>
<moaco v-model="value" :opts="opts" @contentChange="contentChange"></moaco>
</div>
</template>
<script>
import monaco from '@/monaco.vue'
export default {
components: {
monaco,
},
data() {
return {
value: '',
countent: '',
opts: {
value: '',
readOnly: false, // 是否可编辑
language: 'sql', // 语言类型
theme: 'vs-dark', // 编辑器主题
},
}
},
methods: {
contentChange(val) {
//每次改变编辑器内容触发事件，先用一个值存放数据
this.countent = val
},
submit() {
//在你提交给后台时将this.countent赋值给value
this.countent = this.value
},
},
}
</script>
<style>
</style>