代碼編輯器vue2-ace-editor

 

 

template部分

<template>
  <div class="codeEditBox" :style="{height: height + 'px'}">
    <editor
      ref="aceEditor"   
      v-model="options.value"   //初始化顯示是內容
      @init="editorInit"        //初始化回調
      @input="codeChange"      //每次改變時的回調
      @setCompletions="setCompletions"  //添加自定義提示
      :lang="editorOptions.language"  //語言
      :options="editorOptions"    //編輯器配置
      theme="tomorrow_night_blue"  //編輯器風格
    ></editor>
  </div>
</template>

引入依賴

import Editor from 'vue2-ace-editor'
import ace from 'brace'

 

配置

export default {
  name: 'AceEditor',
  data() {
    return {
      defaultOpts: {
        value: '',
        language: 'sql',
        // 設置代碼編輯器的樣式
        enableBasicAutocompletion: true, //啟用基本自動完成
        enableSnippets: true, // 啟用代碼段
        enableLiveAutocompletion: true, //啟用實時自動完成
        tabSize: 2, //標簽大小
        fontSize: 14, //設置字號
        showPrintMargin: false, //去除編輯器里的豎線
      },
      languageObj: {
        javascript: ['mode', 'snippets'],
        css: ['mode', 'snippets'],
        json: ['mode', 'snippets']
      }
    }
  },
  props: {
    options: {
      type: Object,
      default() {
        return {
          language: 'javascript'
        }
      }
    },
    height: {
      type: Number,
      default: 500
    }
  },
  components: {
    Editor
  },
  computed: {},
  watch: {},
  created() {
    this.editorOptions = Object.assign(this.defaultOpts, this.options)
  },
  mounted() {
  },
  methods: {
    codeChange(val) {
      this.$emit('change', val)
    },
    editorInit() {
      const that = this
      require('brace/ext/searchbox') //添加搜索功能
      require('brace/theme/tomorrow_night_blue') //添加風格
      require('brace/ext/language_tools') //language extension prerequsite...
      require('brace/mode/' + this.editorOptions.language)
      require('brace/snippets/' + this.editorOptions.language)
      //添加自定義提示
      const completer = {
        getCompletions: function(editors, session, pos, prefix, callback) {
          that.setCompleteData(editors, session, pos, prefix, callback)
        }
      }
      const lnTools = ace.acequire('ace/ext/language_tools')
      lnTools.addCompleter(completer)
    },
    getVal() {
      return this.$refs.aceEditor.editor.getValue()
    },
    setCompleteData(editor, session, pos, prefix, callback) {
      const data = [
        {
          meta: '表名', // 描述
          caption: 'sonic', // 展示出的名字（一般與value值相同）
          value: 'sonic', // 數據值
          score: 1 // 權重 數值越大 提示越靠前
        },
        {
          meta: '庫名',
          caption: 'sonww',
          value: 'sonww',
          score: 2
        }
      ]
      if (prefix.length === 0) {
        return callback(null, [])
      } else {
        return callback(null, data)
      }
    }
  }
}

 

 

 

 

參考：https://blog.51cto.com/u_15077560/3805230

未驗證的api  https://www.codenong.com/jsfb49c843a679/

　　　

搜索框問題解決

debug思路：

1.   當 ctrl+F 時，會報錯找不到 Seach  ，說明該組件是支持 搜索功能的 ， 但需要引入或者調用， 於是可以打印該組件的實例 ， 發現該組件有$seach 函數
2.   查看源碼node_modules包里去找該函數源碼

 

 3. 發現功能是有的，但是需要引入   ，於是把它引入就可以用了

require('brace/ext/searchbox')