vue2-ace-editor自定义语法提示

前言：网上找了很多不是很系统，这里发一个我自己成功的一个例子

代码：

<!-- editor -->
<template>
  <AceEditor
    v-model="value"
    @init="init"
    :enableBasicAutocompletion="true"
    :enableLiveAutocompletion="true"
    :enableSnippets="true"
    :options="cmOptions"
    lang="xml" theme="monokai"
    width="100%" height="100%"
  />
</template>

<script>
import AceEditor from "vue2-ace-editor";
// 语法提示工具
import 'brace/ext/language_tools' //language extension prerequsite...
import 'brace/ext/searchbox' //language extension prerequsite...
import 'brace/mode/xml'
import 'brace/snippets/xml' //snippet
import 'brace/theme/monokai'
import 'brace/ext/emmet'

export default {
  name: "editor",
  props: {
    content: {
      type: String,
      required: false,
      default: () => ''
    },
    readOnly: {
      required: false,
      default: false
    },
  },
  data() {
    return {
      cmOptions: {
        readOnly: this.readOnly,
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
      },
      editor: null,
    }
  },
  methods: {
    init(editor) {
      editor.on('change', this.change);
      editor.commands.addCommand({
        name: 'save',
        bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
        exec: editor => this.$emit('save-change', this.value, editor)
      })
      editor.commands.addCommand({
        name: 'formatter',
        bindKey: { win: 'Ctrl-Shift-F', mac: 'Command-Shift-F' },
        exec: () => this.$emit('formatter', this.editor)
      })
      // 加入自定义语法提示      
      let that = this;
      editor.completers = [{
        getCompletions: function (editor, session, pos, prefix, callback) {
          that.setCompletions(editor, session, pos, prefix, callback)
        }
      }];
      
      this.editor = editor
    },
    setCompletions(editor, session, pos, prefix, callback) {
      // 这里只是举例子，具体实现要看自己需求
      let data = [
        { caption: 'Task', meta: '任务', value: 'Task' },
        { caption: 'message', meta: '返回值', value: 'message' },
        { caption: '@name', meta: 'mock字段：姓名', value: '@name' },
        { caption: '@phone', meta: 'mock字段：电话', value: '@phone' }
      ]
      if (prefix.length === 0) {
        return callback(null, [])
      } else {
        return callback(null, data)
      }
    },
    change() {
      setTimeout(() => {
        this.$emit('editor-change', this.codeContent_)
      }, 10)
    }
  },
  computed: {
    value: {
      get() {
        return this.content;
      },
      set(v) {
        this.$emit('update:content', v);
      }
    }
  },
  mounted() {
  },
  created() {
  },
  components: {
    AceEditor: AceEditor
  }
}
</script>

<style scoped>
/deep/ .CodeMirror {
  height: 100%;
}
</style>