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

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

這篇文章主要介紹了Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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),//自定義語法提示，代碼補(bǔ)全
          }
        },
        triggerCharacters: ['.'],//輸入點(diǎn)可觸發(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' },
            ], //藍(lán)色
            [
              /[+]|[-]|[*]|[/]|[%]|[>]|[<]|[=]|[!]|[:]|[&&]|[||]/,
              { 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' }],//淺綠
          ],
        },
      })
      // 初始化編輯器實(shí)例
      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`,//補(bǔ)全的文本
     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ā)事件，先用一個(gè)值存放數(shù)據(jù)
      this.countent = val
    },
    submit() {
      //在你提交給后臺(tái)時(shí)將this.countent賦值給value
      this.countent = this.value
    },
  },
}
</script>
 
<style>
</style>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue.js watch經(jīng)常失效的場景與解決方案
這篇文章主要給大家介紹了關(guān)于vue.js watch經(jīng)常失效的場景與解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
如何使用vue實(shí)現(xiàn)跨域訪問第三方http請求
這篇文章主要介紹了如何使用vue實(shí)現(xiàn)跨域訪問第三方http請求,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03
解決vue表單為空也能提交的問題
這篇文章主要介紹了解決vue表單為空也能提交的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
Vue框架的優(yōu)秀設(shè)計(jì)和強(qiáng)大的生態(tài)系統(tǒng)成為了越來越多開發(fā)者選擇Vue的原因,在實(shí)際項(xiàng)目過程中一個(gè)高效的開發(fā)環(huán)境能夠大大提高開發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode搭建vue環(huán)境的相關(guān)資料,需要的朋友可以參考下
2023-10-10
詳解如何在Vue組件方法中加載和使用匿名函數(shù)
在Vue.js的開發(fā)過程中,組件方法的定義和調(diào)用是非常常見的,有時(shí)候,為了響應(yīng)事件或其他操作,我們需要在組件的方法中使用匿名函數(shù),本文將深入探討如何在Vue組件的方法中加載和使用匿名函數(shù),并提供詳細(xì)的代碼示例和解釋,幫助開發(fā)者更好地理解和應(yīng)用這些技術(shù)
2024-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)父組件獲取子組件的方法或?qū)傩灾翟斀猓哂泻芎玫膮⒖純r(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03