Vue2怎么安装使用MonacoEditor

这篇文章主要讲解了“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.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: `\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这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！