Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示)

更新時間：2023年04月17日 09:33:26 作者：前端程序猿i

這篇文章主要介紹了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)//剩余全部更新內(nèi)容
      },
      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: ['.'],//輸入點可觸發(fā)代碼提示
      })
        //自定義語法高亮
      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,
      })
      // 監(jiān)聽編輯器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 [
  /**   * 內(nèi)置函數(shù)   */
  {
     label: 'if',//觸發(fā)提示的文本
     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) {
      //每次改變編輯器內(nèi)容觸發(fā)事件，先用一個值存放數(shù)據(jù)
      this.countent = val
    },
    submit() {
      //在你提交給后臺時將this.countent賦值給value
      this.countent = this.value
    },
  },
}
</script>
 
<style>
</style>