代码编辑器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')