这篇文章主要讲解了“Vue2怎么安装使用MonacoEditor”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue2怎么安装使用MonacoEditor”吧！
1.安装MonacoEditor
cnpm install -S editor@1.0.0cnpm install -S monaco-editor@0.19.3cnpm install -S monaco-editor-webpack-plugin@1.9.12.配置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: `\n#if()\n\t\n #end`,//补全的文本 insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, detail: '流程控制' }, { label: 'if/else', kind: monaco.languages.CompletionItemKind.Function, insertText: '\n#if()\n\n #else\n\n #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>感谢各位的阅读，以上就是“Vue2怎么安装使用MonacoEditor”的内容了，经过本文的学习后，相信大家对Vue2怎么安装使用MonacoEditor这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
