3xdata-ace/index.js

A Vue2.0's component based on last ace/brace

var ace = require("3xdata-brace")
require(["emmet/emmet"], function (data) {
  window.emmet = data.emmet
})

module.exports = {
  template:
    "<div :style=\"{height: height ? px(height) : '100%',width: width ? px(width) : '100%'}\"></div>",
  props: {
    value: {
      type: String,
      required: true,
    },
    lang: String,
    theme: String,
    autoComplete: Boolean,
    height: true,
    width: true,
  },
  data: function () {
    return {
      editor: null,
      contentBackup: "",
    }
  },
  methods: {
    px: function (n) {
      if (/^\d*$/.test(n)) {
        return n + "px"
      }
      return n
    },
  },
  watch: {
    value: function (val) {
      if (this.contentBackup !== val) this.editor.setValue(val, 1)
    },
  },
  mounted: function () {
    var _this = this
    var vm = this
    var lang = this.lang || "text"
    var theme = this.theme || "chrome"
    var autoComplete = this.autoComplete || false

    require("3xdata-brace/ext/emmet")
    var editor = (vm.editor = ace.edit(this.$el))

    _this.$emit("init", editor)

    editor.$blockScrolling = Infinity
    editor.setOption("enableEmmet", true)
    editor.getSession().setMode("ace/mode/" + lang)
    editor.setTheme("ace/theme/" + theme)
    editor.setValue(this.value, 1)

    // set autoComplete
    if (autoComplete) {
      var staticWordCompleter = {
        getCompletions: function (editor, session, pos, prefix, callback) {
          _this.$emit("setCompletions", editor, session, pos, prefix, callback)
        },
      }
      editor.completers = [staticWordCompleter]

      editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true, //只能补全
      })
    }

    editor.on("change", function () {
      var content = editor.getValue()
      vm.$emit("input", content)
      vm.contentBackup = content
    })
  },
}